我正在使用bootstrap 3,并且是它的新手,但似乎是从2开始的相当简单的过渡。

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

这是当它们全部位于col-md-4中时如何呈现的图像:

不过我不明白,它在jsFiddle中可以正常工作,但在我的索引文件中却不能。任何遇到过类似问题的人都可能知道这是怎么回事?

最佳答案

由于各列的高度并不完全相等,因此您需要为大视口(viewport)添加一个clearfix <div>,就像新行应该开始一样,它位于第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

关于html - Bootstrap 3列问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18523024/

10-12 12:54
查看更多