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

Question

我需要消除左栏中方框之间的大差距，但我无法弄清楚如何去做。 （见图）

我有一个html模板，它使用for循环（2行col-xs-6列的行）生成div内容，因此我无法设置静态高度值和浮动内容（因为线总是在变化）。

代码看起来类似于：

<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的偏移网格。

虽然，您可以将引导程序与Masonry Grid结合使用，以获得您正在寻找的效果：

http://masonry.desandro.com/

Answer 2

ID使用匹配高度，因为它更适合您的问题。这是你做的。 下载此文件并添加到您的脚本中。然后将一个类calldd match-height添加到您希望高度相同的div列。

https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js

$(function() {
    $('.match-height').matchHeight();
});

如果有任何问题用jQuery替换$