Bootstrap 网格系统中的浮动 div

Question

我正在将 twitter 引导网格系统用于响应式网站。我的大部分标记工作得很好，但我有一个讨厌的问题，这让我很生气。我准备了一个 JSFiddle 让你看看会发生什么：http://jsfiddle.net/gqb5hbza/

这是我的标记

<section>
<div class="content">
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="item">
                <a href="#">
                    <img class="adaptive-img" src="http://placehold.it/400x330" />
                </a>

                <div class="item-content">
                    <a href="#"><h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4></a>
                </div>
            </div>
        </div>
        ..........
    </div>
  </div>
</section>

我有多个包含图片和标题的 div 框。更改浏览器窗口时会重新排列这些框。但是，如果其中一个框的高度不同（即标题太长，需要两行），系统就会中断并且无法正确重新排列 - 正如您在小提琴中看到的那样。第四个框应该在第一个框的下方，而不是在下方。

希望有人能帮我解决这个问题。

Answer 1

如前所述，如果您想保持布局不变（例如，不明确定义每一行），最好的解决方案是保持每个 col div 的高度相同。您可以使用 Bootstrap 的缩略图/标题类来使内容看起来更整洁，然后使用媒体查询调整标题的最小高度值，以将额外的空白保持在最低限度。

<section>
<div class="content">
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="thumbnail">
                <a href="#">
                    <img class="adaptive-img" src="http://placehold.it/400x330" />
                </a>

                <div class="caption">
                    <a href="#"><h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4></a>
                </div>
            </div>
        </div>
        ...
   </div>
</div>
</section>

然后添加类似这个css的东西：

.caption { min-height: 275px;}

@media(min-width: 400px) {
  .caption { min-height: 100px;}
}

这是带有此代码的updated fiddle。希望对您有所帮助。