7

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

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

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

4

1 回答 1

25

我相信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

在此处输入图像描述

带清晰修复

<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
在您想要的 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你会发现另一个插图。这个小提琴显示了 clearfix 将如何解决问题。注意<div class="col-sm-3">这里没有col-12-*. 在 xs 网格上，列默认为 100%，并且没有浮点数，因此col-xs-12-*与在 xs 网格上具有非类的行为相同。

于 2013-10-04T08:14:50.270 回答