css - 如何使用 Bootstrap/css 为 2 列网格制作不均匀的行？

Question

我需要消除左列中框之间的大间隙，但我不知道该怎么做。 (见图)

我有一个 html 模板，它使用 for 循环(2 col-xs-6 列的行)生成 div 内容，所以我不能设置静态高度值和 float 的东西(因为行数是总是在变化)。

代码看起来类似于:

<div class="row">
<div class="col-xs-6" py:for="title, content in data">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                { title }
            </div>
        </div>
        <div class="col-xs-12" py:for="line in content">
            { line }
        </div>
    </div>
</div>

有谁知道一些 CSS 魔法来帮助我吗？

Answer 1

目前，bootstrap 不支持类似 pinterest 风格的偏移网格。

不过，您可以结合使用 bootstrap 和诸如 Masonry Grid 之类的东西来获得您想要的效果:

http://masonry.desandro.com/