html - Bootstrap 3 列问题

Question

我正在使用 bootstrap 3，这是一个新手，但它似乎是从 2 的一个相当简单的过渡。

这是带有代码的 jsfiddle:http://jsfiddle.net/AHvLW/

这是当它们都在 col-md-4 中时它如何呈现的图像:

虽然我不明白，它在 jsFiddle 中运行良好，但在我的索引文件中却不行。任何遇到类似问题的人可能知道这是怎么回事？

Answer 1

由于列的高度并不完全相同，因此您需要添加一个 clearfix <div>对于大视口(viewport)，就像新行应该开始一样，即在第 3 列和第 4 列之间:

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>

Demo fiddle