Bootstrap 3.0：正確清除嵌套div的浮標

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具有可變高度的類。