如何在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提到的Bootstrap列.这可以这样做:

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

这篇文章包含完整的资源,使其在全球范围内sm发挥作用lg.

Answer 2

如果我正确地理解了你的问题,那么.clearfix在每组需要在一行中的元素之后应该相应地应用它.

检查示例

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

看看一个简要概述了如何使用:第n个孩子.

Answer 3

不幸的是，网格并不是这样工作的。您可以使用诸如masonry之类的东西，或者使用 php.ini 为每个断点生成不同的容器。例如：

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