如何确保列在Twitter Bootstrap 3中平均包装？ [英] How can I ensure columns wrap equally in Twitter Bootstrap 3?

问题描述

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

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?

我有

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

有可能获得列总是包装4列（中等），3列（小）或2列（超小）的行，只需CSS，或者我需要一些JS或者使用一些服务器端编程来创建新行？

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?

推荐答案

不幸的是网格不工作。您可以使用类似 masonry 的方法，或者使用php为每个断点生成不同的容器。例如：

Thats unfortunately not how the grid works. You could use something like masonry or have different containers generated for each breakpoint with 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>

这篇关于如何确保列在Twitter Bootstrap 3中平均包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！