Question

我正在使用bootsrap 3.0并且对使用clearfix class感到困惑。我的问题是，如果我有这样的结构

<div class="container">
  <div class="row">
   <div class="col-md-4 col-sm-4 col-xs-12></div>
   <div class="col-md-4 col-sm-4 col-xs-12></div>
   <div class="col-md-4 col-sm-4 col-xs-12></div>

   <div class="clearfix></div> //is this proper place to clear floats for above divs ?  
  </div>
</div>

以及其他方案，如果我必须添加嵌套的div，例如

<div class="container">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12>
      <div class="col-md-6"></div><!--inner div-->
      <div class="col-md-6"></div><!--inner div-->
     // how do i clear flaots for these ones 
   </div>
   <div class="col-md-6 col-sm-6 col-xs-12></div>


   <div class="clearfix></div> //is this proper place to clear floats for above divs ?  
  </div>
</div>

Answer 1

是的，这个地方是正确的，但您可能需要指定要应用clearfix的视口，如bootstrap documentation中所述，所以它会是：

<div class="clearfix visible-md-block visible-sm-block"></div>

对于另一个问题。在引导程序中，如果不将它们包含在具有row类的div中，则无法添加嵌套列。所以它应该是这样的：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="row">
        <div class="col-md-6"></div><!--inner div-->
        <div class="col-md-6"></div><!--inner div-->
      </div>
    </div>
   <div class="col-md-6 col-sm-6 col-xs-12"></div>
  </div>
</div>

对于上一个示例，您不需要clearfix，因为您只有两列，但是当您需要明确修复时，这是一个示例：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="row">
        <div class="col-md-3 col-sm-6"></div>
        <div class="col-md-3 col-sm-6"></div>

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

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

在此示例中，md断点处有4列，sm中有2列，因此如果sm断点处于活动状态，并且列的高度不同，则需要clearfix div。请注意，这适用于嵌套行。

您必须为具有可变高度的每个级别的.col- - 类应用相同的clearfix。

Bootstrap 3.0：为嵌套的div正确清除浮动

1 个答案: