Question

我正在使用twitter bootstrap网格系统来建立响应式网站。我的大多数标记工作得很好，但我有一个讨厌的问题，这让我很生气。我准备了一个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。希望这会帮助你。

Bootstrap网格系统中的浮动Div

1 个答案: