嗨,在bootstrap 3.0文档中,如果您在“响应列重置”子标题下查看,它将显示以下内容:
现在,这是什么意思?我以为漂浮物已清除-或不是基于宽度。我在这里想念什么?
最佳答案
我相信http://getbootstrap.com/css/#grid-responsive-resets上的示例是错误的,没有说明问题。
http://getbootstrap.com/css/#grid-responsive-resets上的示例无法直观地说明问题。
没有clearfix的示例:
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
<div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>
在第一列(红色)高而第二列(蓝色)高的超小(xs)上,也会导致第三列(绿色)浮在第一列的右侧。
没有clearfix
用clearfix
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
<div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>
col-*-12
当您在一行中添加更多的12列并且此行之一应为100%(col-*-12)时,也会发生此问题。
考虑这种情况:
在所需的较大网格上:
1 | 2 | 3On the xs grid you want:
1 | 2 3
You can accomplish the above with:
Without clearfix:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>
红色背景将向您显示最后一列将与第一列重叠。添加clearfix将删除此背景:
With clearfix:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>
结果:
提到的重叠将由
col-12-*
类没有剩余浮点数引起,另请参见:https://github.com/twbs/bootstrap/issues/10152在https://github.com/twbs/bootstrap/issues/10535上,您将找到另一个插图。 This fiddle显示了clearfix将如何解决该问题。注意这里的
<div class="col-sm-3">
没有col-12-*
。在xs网格上,默认情况下列为100%,并且没有浮点数,因此col-xs-12-*
的行为与在xs网格上具有非类的行为相同。关于twitter-bootstrap - Bootstrap 3.0 :responsive column resets section of the documentation,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19172397/