twitter-bootstrap - Bootstrap 3.0 :responsive column resets section of the documentation

Question

嘿，如果您在“响应列重置”子标题下查看 bootstrap 3.0 文档，它会显示以下内容:

"With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes."

现在他们是什么意思？我认为 float 清除或没有基于宽度。我在这里想念什么？

Answer 1

我相信 http://getbootstrap.com/css/#grid-responsive-resets 上的示例是错误的，没有说明问题。

http://getbootstrap.com/css/#grid-responsive-resets 上的示例不能直观地说明问题。

your columns don't clear quite right as one is taller than the other

没有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)上，将导致第三列(绿色)也 float 在第一列的右侧。

没有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 网格上具有非类的行为相同。