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

Question

嘿,所以在bootstrap 3.0文档中,如果你看一下副标题"响应列重置",它说如下:

"由于四层网格可用,你必然遇到一些问题,在某些断点处,你的列不能很清楚,因为一个高于另一个.要解决这个问题,请使用.clearfix和响应式实用程序类."

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

Answer 1

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

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