Question

我正在研究this online tutorial的引导程序。在使用Bootstrap 3网格系统创建多列布局部分中，他们说：

如果任何列的高度高于另一列，则它不能正确清除并打破布局。要解决此问题，请使用.clearfix类和响应实用程序类的组合。

我试过给一行中的列赋予不同的高度。我发现我不需要.clearfix，因为布局没有破坏。应用.clearfix或不应用它不会对布局产生任何影响。

没有。.clearfix：

@import  url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")

p {
  padding: 50px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  background: #dbdfe5;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Box 1</p>
    </div>
    <div class="col-md-4">
      <p>Box 2</p>
    </div>
    <div class="col-md-4">
      <p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
    </div>

    <!--	<div class="clearfix visible-md-block"></div>  -->

    <div class="col-md-4">
      <p>Box 4</p>
    </div>
    <div class="col-md-4">
      <p>Box 5</p>
    </div>
    <div class="col-md-4">
      <p>Box 6</p>
    </div>

    <!--	<div class="clearfix visible-md-block"></div>  -->

    <div class="col-md-4">
      <p>Box 7</p>
    </div>
    <div class="col-md-4">
      <p>Box 8</p>
    </div>
    <div class="col-md-4">
      <p>Box 9</p>
    </div>

    <!--	<div class="clearfix visible-md-block"></div>  -->

    <div class="col-md-4">
      <p>Box 10</p>
    </div>
    <div class="col-md-4">
      <p>Box 11</p>
    </div>
    <div class="col-md-4">
      <p>Box 12</p>
    </div>
  </div>
</div>

使用.clearfix：

@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Box 1</p>
    </div>
    <div class="col-md-4">
      <p>Box 2</p>
    </div>
    <div class="col-md-4">
      <p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
    </div>

    <div class="clearfix visible-md-block"></div>

    <div class="col-md-4">
      <p>Box 4</p>
    </div>
    <div class="col-md-4">
      <p>Box 5</p>
    </div>
    <div class="col-md-4">
      <p>Box 6</p>
    </div>

    <div class="clearfix visible-md-block"></div>

    <div class="col-md-4">
      <p>Box 7</p>
    </div>
    <div class="col-md-4">
      <p>Box 8</p>
    </div>
    <div class="col-md-4">
      <p>Box 9</p>
    </div>

    <div class="clearfix visible-md-block"></div>

    <div class="col-md-4">
      <p>Box 10</p>
    </div>
    <div class="col-md-4">
      <p>Box 11</p>
    </div>
    <div class="col-md-4">
      <p>Box 12</p>
    </div>
  </div>
</div>

那么，为什么使用.clearfix如果没有任何区别呢？

Answer 1

Bootstrap自己的文档在其Responsive Column Resets section中提供了一个很好的例子：

如果有四层网格可供使用，您必须遇到一些问题，在某些断点处，您的列不清楚，因为一个比另一个更高。要解决此问题，请使用.clearfix和响应式实用程序类的组合。
<div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

   
    <div class="clearfix visible-xs-block"></div>

   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  </div>

这就是他们使用的示例标记在.clearfix类到位时的样子：

没有它，这就是它的样子：

为什么我们需要在bootstrap的每12列后添加.clearfix？

1 个答案: