5

我正在使用引导程序创建一个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. 欢迎任何建议:-)

4

1 回答 1

8

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

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

http://bootply.com/61482

于 2013-09-27T13:28:45.263 回答