html - Bootstrap - 所有 'rows' 后面都必须跟一列吗？

Question

我知道这是一个愚蠢的问题，但我似乎无法在网上找到这方面的答案。对于 Bootstrap ，我知道您使用 rows 和 cols 来指定行的大小。但是如果我有这样的东西:

<div class='row'>
    <div class='col-md-12'></div>
</div>

添加 col-md-12 有什么意义吗？如果您想要行的全长，我认为只需粘贴 row 类就足够了？？

如有任何建议，我们将不胜感激。

谢谢

Answer 1

是的，您可能想要 col。使用浏览器的开发人员工具检查它。您会看到 margin/padding 和其他样式被应用于 .col-* 以使内容正确排列。

.row 类主要提供列提供的“ float 清除”。

如您所知，列允许各种“网格布局”宽度/尺寸，并自动调整以适应响应式浏览器尺寸需求。

运行下面的代码片段以查看不同之处(单击“全页”链接，否则它会被压缩成一个小 View )。 (请注意，我已经为行/列添加了边框以突出显示正在发生的事情):

.row {
  border: 1px solid red;
}

[class^="col-"] {
  border: 1px solid black;
}

.other {
  border: 1px solid blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      This is a row with a full-width column.
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      This row has a few smaller column.
    </div>
    <div class="col-sm-4">
      This row has a few smaller column.
    </div>
    <div class="col-sm-4">
      This row has a few smaller column.
    </div>
  </div>
  <div class="row">
    This row has no columns.
  </div>
  <div class="other">This has no columns nor rows.</div>
</div>