嗨,在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 | 3
On 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/

10-10 14:25
查看更多