twitter-bootstrap - 不同高度的缩略图 : is the behavior I get correct?

Question

我正在使用 Bootstrap 创建 div thumbnails 的网格具有不同的高度。代码遵循以下结构:

<div class="row">
    <ul class="thumbnails">
        <li class="span4">
            <div class="thumbnail">
                content here
            </div>
        </li>
        <li class="span4">
            <div class="thumbnail">
                content here
            </div>
        </li>
        <li class="span4">
            <div class="thumbnail">
                content here
            </div>
        </li>
    </ul>
</div>

当然每个thumbnail有不同的内容，结果我有不同的高度。我得到的是这样的:



如您所见，在第一个和第二个之间有一个空的反审美，不聪明的中空空间。这是正常的吗？我正在编写的代码结构良好吗？我怎样才能避免这种行为？我读过一个提示，告诉我正确的做法是每三个缩略图添加一行，然后关闭该行并再插入三个缩略图，依此类推。但恕我直言，我认为这不是正确的做法，因为没有什么可以堆积起来，我无法获得 bootstrap 的魔力.欢迎任何建议:-)

Answer 1

是的，这种行为是意料之中的。您可以使用诸如 jQuery Isotope (https://github.com/desandro/isotope) 或 Masonry 之类的插件来让图像填充空白区域。

这是 Isotope + Bootstrap 缩略图的演示:

http://bootply.com/61482