如果超过 12 列自动换行，我们真的需要关闭它吗？

Question

我一直在使用 Bootstrap 一段时间（特别是版本 3）并且注意到我仍然不确定我是否应该总是关闭具有在每 12 列之后分配给它的类的 .row 的列或者可以只要我了解在单行中加起来超过 12 列的任何列都会自动换行，我会等待并在我的代码末尾应用结束的 .row。后一个选项的好处是代码更少，忘记为每 12 列行添加结束 div 标记的机会更少。

换句话说，这样做更好吗？

<div class="row">
  <div class="col-md-8">
   <p>some content here</p>
  </div>
  <div class="col-md-4">
   <p>some content here too</p>
  </div>
</div><!--/.row-->

<div class="row">
  <div class="col-md-6">
   <p>some content here</p>
  </div>
  <div class="col-md-6">
   <p>some content here too</p>
  </div>
</div><!--/.row-->

或者，这种方法效率更高吗？

 <div class="row">
  <div class="col-md-8">
    <p>some content here</p>
  </div><!--/.col-md-8-->

  <div class="col-md-4">
    <p>some more content here</p>
  </div><!--/.col-md-4-->

 <div class="col-md-6">
   <p>some content here</p>
  </div>

  <div class="col-md-6">
   <p>some content here too</p>
  </div>
</div><!--/one .row div to close them all-->

Answer 1

...嗯，这实际上取决于设计 - 我根据具体情况使用两者。

区别在于元素的高度。如果第一行中的两个列具有不同的高度，则关闭该行实质上意味着两个底部列将从相同的顶部位置开始对齐。

但是，如果列的高度不同，则不关闭行可能会产生不同的结果。

edit: ...这是因为 float 作用于 cols 元素的方式。关闭一行会清除浮动。

edit2：这是两种情况的示例：

不关闭行：

<div class="row">
  <div class="col-">
    content
  </div>
  <div class="col-">
    content
  </div>
  <div class="col-">
    content
  </div>
  <div class="col-">
    content
  </div>
</div>

http://jsfiddle.net/b2rkgd5w/1/

结束行： http://jsfiddle.net/1krj49pm/2/

除了关闭行元素之外，其余代码完全相同。