我正在使用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/