Bootstrap - 所有“行”都必须跟一列吗？

Question

我知道这是一个愚蠢的问题，但我似乎无法在网上找到答案。对于引导程序，我知道您使用行和列来指定行的大小。但如果我有这样的事情：

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

添加那个有什​​么意义col-md-12吗？row如果您想要整排的长度，我认为只要坚持上课就足够了？

对此的任何建议将不胜感激。

谢谢

Answer 1

是的，你可能想要上校。使用浏览器的开发人员工具检查它。你会看到边距/填充和其他样式被应用.col-*以使事情正确排列。

本.row类主要提供“浮动清理”即列提供。

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

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

.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>