Question

我正在完成这个Bootstrap tutorial，并没有真正得到他们使用clearfix的例子。在添加clearfix之前，html是：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of Bootstrap 3 Grid System</title>
  <link rel="stylesheet" href="../bootstrap-3.3.4-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
      }
  </style>
</head> 

</body>
  <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</p></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="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="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>
</body>
</html>

添加clearfix后：

</body>
  <div class="container">
    <div class="row">
      <div class="col-md-4"><p class="fat">Box 1</p></div>
      <div class="col-md-4"><p>Box 2</p></div>
      <div class="col-md-4"><p>Box 3</p></div>
      <div class="clearfix visible-md-block" style="clear: both"></div> 
      <div class="col-md-4"><p>Box 4</p></div>
      <div class="col-md-4"><p class="fat">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>
</body>

我使用.fat类使两个div（Box 1和Box 5）更大，看看clearfix的效果是什么。但在比较两者（有和没有clearfix）后，我没有得到任何可见的结果： clearfix not working?

如果我没有错，那么clearfix应该实现的是清空clearfix div清除大Box 1的浮动，以便Box 4在第1列中落在它下面并且不会被冲到它的一边。这个我可以在Box 4和Box 7 div中实现我的设置style="clear: both"： cleared 4 and 7

我不太确定，因为教程没有给出预期结果的任何截图，所以这是clearfix应该实现的，还是我只是理解整个错误？如果是这样，为什么添加clearfix divs没有任何效果？如果有人能澄清，我会非常感激。谢谢！

Bootstrap：这个clearfix应该如何工作？

0 个答案: