如何确保列在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屋!