Bootstrap 3.0：响应列重置文档部分

2023-11-21

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

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

那么他们这是什么意思呢？我认为浮动是否被清除取决于宽度。我在这里缺少什么？

~~我相信这个例子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) 上，第一列（红色）比第二列（蓝色）高，将导致第三列（绿色）也浮动在第一列的右侧。

没有清除修复

enter image description here

与清除修复

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

enter image description here

col-*-12

当您在一行中添加更多 12 列并且其中一行应为 100% (col-*-12) 时，也会出现此问题。

考虑这种情况：

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


1 | 2 | 3

On the xs grid you want:


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>

结果：

enter image description here

提到的重叠将由以下原因引起col-12-*类没有剩余浮动，另请参阅：https://github.com/twbs/bootstrap/issues/10152

On https://github.com/twbs/bootstrap/issues/10535你会发现另一个例子。这把小提琴展示了clearfix 将如何解决该问题。笔记<div class="col-sm-3">这里没有col-12-*。在 xs 网格上，列默认为 100%，并且没有浮动，因此col-xs-12-*与 xs 网格上没有类的行为相同。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

twitterbootstrap

twitterbootstrap3