Question

我已经使用Bootstrap一段时间了（特别是版本3），并且注意到我仍然不确定是否应该总是关闭列，每隔12列或者可以分配一个.row类的。我等待并在我的代码末尾应用关闭.row只要我理解在一行中添加超过12列的任何列将自动换行到新行。后一个选项的好处是它可以减少代码并且忘记为每个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

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

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

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

编辑：...这是因为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/

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

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

1 个答案: