javascript – 如何确保列在Twitter Bootstrap 3中平均包装?

前端之家收集整理的这篇文章主要介绍了javascript – 如何确保列在Twitter Bootstrap 3中平均包装?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我有一个未知数量的项目显示,每个在他们自己的列,有没有办法让他们平均包装,而不必为每个创建新的行?

我有

<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或使用一些服务器端编程创建新行?

解决方法

这不幸不是网格如何工作.您可以使用像 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>
原文链接:https://www.f2er.com/js/154122.html

猜你在找的JavaScript相关文章