Bootstrap 3列问题

Question

我正在bootstrap 3和我一起工作,但它似乎是从2开始的一个相当简单的过渡.

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

这是一个关于它们在col-md-4中的渲染方式的图像:

我不明白,它在jsFiddle中工作正常,但不在我的索引文件上.任何人都会遇到类似的问题,可能知道它有什么意义吗？

Answer 1

由于列的高度不完全相同<div>,因此需要为大视口添加clearfix ,就像新行应该开始一样,即在第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>

演示小提琴

Answer 2

你可以用这个css轻松解决它:

.col-md-4:nth-child(3n+1){
    clear: left;
}

在这里找到了解决方案