Bootstrap 3.0:响应列重置文档部分 [英] Bootstrap 3.0:responsive column resets section of the documentation

问题描述

嘿，在 bootstrap 3.0 文档中，如果您查看子标题响应列重置"下的内容:

<块引用>

有了可用的四层网格，您一定会遇到一些问题，在某些断点处，您的列不能完全清除，因为一个比另一个高.要解决这个问题，请使用.clearfix 和我们的响应式实用程序类."

现在他们的意思是什么?我认为浮动清除 - 或没有 - 基于宽度.我在这里错过了什么?

解决方案

我相信

在 https://github.com/twbs/bootstrap/issues/10535你会发现另一个插图.这个小提琴 展示了 clearfix 将如何解决问题.注意

这里没有 col-12-*.xs 网格上的列默认为 100% 并且没有浮点数，因此 col-xs-12-* 将与 xs 网格上的非类一样.

Hey so in the bootstrap 3.0 documentation if you look under the subheading "responsive column resets" it says the following:

"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."

Now what do they mean by this? I thought floats cleared-or didn't-based on width. What am I missing here?

解决方案

I believe the example on http://getbootstrap.com/css/#grid-responsive-resets is wrong and not illustrating the problem.

The example on http://getbootstrap.com/css/#grid-responsive-resets not visual illustrating the problem.

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

example without 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.

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

The problem happens also when you add more the 12 columns in a row and one of this rows should be 100% (col-*-12).

Consider this situation:

On the larger grids you want:

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>  

The red background will show you the last column will overlap the first. Adding the clearfix will remove this background:

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

On https://github.com/twbs/bootstrap/issues/10535 you will find an other illustration. This fiddle shows 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.

这篇关于Bootstrap 3.0:响应列重置文档部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！