twitter-bootstrap 如何确保列在 Twitter Bootstrap 3 中均匀换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19918156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I ensure columns wrap equally in Twitter Bootstrap 3?
提问by JennyDanger
If I have an unknown number of items to display, each within their own column, is there a way to get them to wrap equally without having to create new rows for each?
如果我有未知数量的项目要显示，每个项目都在自己的列中，有没有办法让它们平等地换行而不必为每个项目创建新行？
I have
我有
<div class="row">
<!-- 1st col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Short</p></div>
<!-- 2nd col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem</p></div>
...
<!-- nth col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem that might be long</p></div>
</div>
The columns will have varying heights, which can sometimes lead to unequally distributed columns:
列将具有不同的高度，这有时会导致列分布不均：
Is it possible to get the columns to always wrap in rows of 4 columns (for medium), 3 columns (for small), or 2 columns (for extra-small) with just CSS, or will I need some JS or to use some server side programming to create new rows?
是否可以仅使用 CSS 使列始终包含 4 列（中型）、3 列（小型）或 2 列（超小型）的行，或者我是否需要一些 JS 或使用一些服务器端编程以创建新行？
采纳答案by hugo der hungrige
Thats unfortunately not how the grid works. You could use something like masonryor have different containers generated for each breakpoint with php. e.g.:
不幸的是，这不是网格的工作方式。您可以使用masonry 之类的东西，或者使用 php 为每个断点生成不同的容器。例如：
<div class ="visible-xs"><div class ="row">... </div></div>
<div class ="visible-sm"><div class ="row">... </div></div>
<div class ="visible-md"><div class ="row">... </div></div>
回答by gertas
There is the way to clear Bootstrap columnsas mentioned by Maciej. This can be done this way:
还有就是要明确引导列的方式由马切伊提及。这可以通过以下方式完成：
.col-lg-3:nth-child(4n+1){
clear: left;
}
The article contains full source which makes it work universally from smto lg.
这篇文章包含完整的源代码，这使它从sm到通用lg。
回答by Maciej Gurban
If I understood your problem correctly, it should be enough to just apply .clearfixaccordingly after each set of elements that need to be in one line.
如果我正确理解了您的问题，那么.clearfix在需要在一行中的每组元素之后相应地应用就足够了。
Check the example
检查示例
And alternative solution is to use CSS :nth-childpseudo-class in combination with media queries. For each resolution, there would be a different n-thelement with clear:both, that would create a new row.
另一种解决方案是将 CSS:nth-child伪类与媒体查询结合使用。对于每个分辨率，都会有一个不同的n-th元素clear:both，它会创建一个新行。
Take a look at a quick overview how to use :nth-child.
看看一个简要概述了如何使用：第n个孩子。
回答by Rae
Use Responsive Column Resets: http://getbootstrap.com/css/#grid-responsive-resets
使用响应列重置：http: //getbootstrap.com/css/#grid-responsive-resets
I was creating an event viewer that would show 12 different events. In large mode I wanted them 4x3, medium 3x4, small 2x6, and x-small just stacked.
我正在创建一个可以显示 12 个不同事件的事件查看器。在大模式下，我希望它们 4x3、中 3x4、小 2x6 和 x-small 堆叠。
<div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 1</div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 2</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 3</div>
<div class="clearfix visible-md-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 4</div>
<div class="clearfix visible-sm-block visible-lg-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 5</div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 6</div>
<div class="clearfix visible-sm-block visible-md-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 7</div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 8</div>
<div class="clearfix visible-sm-block visible-lg-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 9</div>
<div class="clearfix visible-md-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 10</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 11</div>
<div class="col-lg-3 col-md-4 col-sm-6">Text 12</div>
</div>
