如何在Twitter Bootstrap 3中确保列均匀包装？

Question

如果我要显示未知数量的项目，每个项目都在自己的列中，是否有办法让它们平均包装而不必为每个项目创建新行？

我有

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

列将具有不同的高度，这有时会导致不均匀分布的列：

是否有可能让列总是用4行（对于中），3列（对于小）或2列（对于超小）来换行，只需要CSS，或者我需要一些JS或者使用一些服务器端编程来创建新行？

Answer 1

Maciej提到的is the way to clear Bootstrap columns。这可以这样做：

 .col-lg-3:nth-child(4n+1){
   clear: left;
 }

该文章包含完整的来源，使其从sm到lg普遍适用。

Answer 2

如果我正确理解了您的问题，那么只需在需要在一行中的每组元素之后相应地应用.clearfix即可。

检查example

另一种解决方案是将CSS :nth-child伪类与媒体查询结合使用。对于每个分辨率，将有一个n-th元素与clear:both不同，这将创建一个新行。

看看quick overview how to use :nth-child。

Answer 3

遗憾的是，这不是网格的工作原理。您可以使用masonry之类的东西，或者使用php为每个断点生成不同的容器。 e.g：

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

Answer 4

使用响应列重置：http://getbootstrap.com/css/#grid-responsive-resets

我正在创建一个能够显示12个不同事件的事件查看器。在大模式下，我想要它们4x3，中等3x4，小2x6和x小只是堆叠。

Audio