twitter-bootstrap Bootstrap 3.0：响应列重置文档部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19172397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.0:responsive column resets section of the documentation
提问by Demetrio M.
Hey so in the bootstrap 3.0 documentation if you look under the subheading "responsive column resets" it says the following:
嘿，在 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."
“有了四层可用的网格，你肯定会遇到问题，在某些断点处，你的列不能完全清除，因为一个比另一个高。要解决这个问题，请使用 .clearfix 和我们的响应式实用程序类。”
Now what do they mean by this? I thought floats cleared-or didn't-based on width. What am I missing here?
现在他们是什么意思？我认为浮动清除 - 或没有 - 基于宽度。我在这里错过了什么？
回答by Bass Jobsen
I believe the example on http://getbootstrap.com/css/#grid-responsive-resetsis wrong and not illustrating the problem.
我相信http://getbootstrap.com/css/#grid-responsive-resets上的例子是错误的，并没有说明问题。
The example on http://getbootstrap.com/css/#grid-responsive-resetsnot visual illustrating the problem.
http://getbootstrap.com/css/#grid-responsive-resets上的示例没有直观地说明问题。
your columns don't clear quite right as one is taller than the other
你的列不太清楚，因为一个比另一个高
example without 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="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>
On the extra small (xs) with the first column (red) taller then the second (blue )will cause the third (green) column float on the right side of the first too.
在第一列（红色）高于第二列（蓝色）的额外小（xs）上，第三列（绿色）也会浮动在第一列的右侧。
without clearfix
没有清除
with 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
The problem happens also when you add more the 12 columns in a row and one of this rows should be 100% (col-*-12).
当您在一行中添加更多的 12 列并且其中一行应该是 100% (col-*-12) 时，也会出现问题。
Consider this situation:
考虑这种情况：
On the larger grids you want:
在您想要的较大网格上：
1 | 2 | 3在你想要的 xs 网格上：
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>
The red background will show you the last column will overlap the first. Adding the clearfix will remove this background:
红色背景将显示最后一列将与第一列重叠。添加 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>
The results:
结果：
The overlap mentioned will be cause by the col-12-*classes don't have a float left, see also: https://github.com/twbs/bootstrap/issues/10152
提到的重叠将是由于col-12-*类没有浮动左侧造成的，另请参见：https: //github.com/twbs/bootstrap/issues/10152
On https://github.com/twbs/bootstrap/issues/10535you will find an other illustration. This fiddleshows how the clearfix will solve the problem. Note <div class="col-sm-3">here don't have a col-12-*. On the xs grid columns are 100% by default and don't have a float so col-xs-12-*will act the same as having non class on the xs grid.
在https://github.com/twbs/bootstrap/issues/10535 上，您会找到其他插图。这个小提琴显示了 clearfix 将如何解决问题。注意<div class="col-sm-3">这里没有col-12-*. 在 xs 网格上，默认情况下列是 100% 并且没有浮点数，因此col-xs-12-*与在 xs 网格上具有非类的行为相同。
