twitter-bootstrap – Bootstrap 3.0：响应列重置文档部分

嘿,所以在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.”

现在他们的意思是什么？我认为花车清除 – 或没有 – 基于宽度.我在这里想念的是什么？

上的例子是错误的,没有说明问题.

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)上,第二列(蓝色)将导致第三(绿色)列浮动在第一列的右侧.

没有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>

山坳 – * – 12

当您在一行中添加更多12列并且其中一行应为100％(col – * – 12)时,也会出现此问题.

考虑这种情况：

在你想要的更大的网格上：

1 | 2 | 3

在你想要的xs网格上：

1 | 2
  3

你可以用以下方法完成上述任务

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网格上的非类相同.