- 首页
- 其他开发
- 如果超过 12 列自动换行，我们真的需要关闭它吗?
如果超过 12 列自动换行，我们真的需要关闭它吗?
[英] If more than 12 columns wrap onto a new line automatically, do we really need to close it?
本文介绍了如果超过 12 列自动换行，我们真的需要关闭它吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在使用 Bootstrap 一段时间(特别是第 3 版)，并且注意到我仍然不确定是否应该始终关闭每 12 列后分配给它的 .row 类的列，或者可以我等待并在我的代码末尾应用关闭的 .row，只要我知道在单行中加起来超过 12 列的任何列将简单地自动换行到一个新行.后一个选项的好处是代码更少，并且忘记为每 12 列行添加结束 div 标记的机会更少.
换句话说，这样做更好吗?
<div class="col-md-8"><p>这里有一些内容</p>
<div class="col-md-4"><p>这里也有一些内容</p>
</div><!--/.row--><div class="row"><div class="col-md-6"><p>这里有一些内容</p>
<div class="col-md-6"><p>这里也有一些内容</p>
</div><!--/.row-->
或者，这种方法更有效吗?
<div class="col-md-8"><p>这里有一些内容</p></div><!--/.col-md-8--><div class="col-md-4"><p>这里还有一些内容</p></div><!--/.col-md-4--><div class="col-md-6"><p>这里有一些内容</p>
<div class="col-md-6"><p>这里也有一些内容</p>
</div><!--/one .row div 将它们全部关闭-->
解决方案
...嗯，这实际上取决于设计 - 我根据情况使用两者.
区别在于元素的高度.如果第一行中的两列具有不同的高度，则关闭该行实质上意味着底部的两列将从相同的顶部位置开始对齐.
但是，如果列具有不同的高度，不关闭行可能会产生不同的结果.
...这是因为 float 在 cols 元素上工作的方式.关闭一行会清除浮动.
edit2:这是两种情况的示例:
不关闭行:
<div class="col-">内容
<div class="col-">内容
<div class="col-">内容
<div class="col-">内容
http://jsfiddle.net/b2rkgd5w/1/
结束行:http://jsfiddle.net/1krj49pm/2/
除了关闭行元素之外，其余代码完全相同.
I've been using Bootstrap for a while (specifically, version 3) and have noticed that I still am unsure whether I should always close columns with a that has a class of .row assigned to it after every 12 columns OR can I wait and apply that closing .row at the end of my code as long as I understand that any columns that add up to more than 12 columns in a single row will simply wrap automatically onto a new line. The benefit of the latter option is that it would be less code and less chances of forgetting to add that closing div tag for each 12 column row.
In other words, is it better to do this?
<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-->
OR, is this method more efficient?
<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-->
解决方案
...well, it actually depends on the design - I am using both depending on the circumstance.
The difference lies in the height of the elements. If the two cols in the first row had different heights, closing the row would essentially mean that the two bottom columns would be aligned starting from the same top position.
However if the cols have different heights NOT closing the row can have different results.
edit: ...this is because of the way float works on the cols elements. Closing a row clears the float.
edit2: here is an example of both cases:
not closing row:
<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/
closing row:
http://jsfiddle.net/1krj49pm/2/
besides closing the row element the rest of the code is exactly the same.
这篇关于如果超过 12 列自动换行，我们真的需要关闭它吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
