Bootstrap在移動到下一行時清除前一列

我使用Bootstrap組織三個行中的項目。但是，如果列的高度不一樣，則移動到下一行的項目最終會在前一個項目的下方，而不是在左側。Bootstrap在移動到下一行時清除前一列

<div class="row"> 
    <div class="col-md-4"> 
    </div> 
    <div class="col-md-4"> 
     // lot of content 
    </div> 
    <div class="col-md-4"> 
     // little content 
    </div> 
    <div class="col-md-4"> 
     // stays on right side below previous item 
    </div> 
</div>

我已經能夠通過使用jQuery使具有相同y位置相同高度的所有列來解決這個問題，但我敢肯定有一個更好的辦法。

來源

2015-06-04 user3170702

添加clearfix這樣的：

<div class="row"> 
    <div class="col-md-4"> 
    </div> 
    <div class="col-md-4"> 
     // lot of content 
    </div> 
    <div class="col-md-4"> 
     // little content 
    </div> 
    <div class="clearfix"></div> 
    <div class="col-md-4"> 
     // now goes to new line 
    </div> 
</div>

來源

2015-06-04 08:56:08 simnys

感謝這段代碼，我以爲這是不會與「COL-SM-6 COL-MD-4」的例子，但我發現，這裏的解決方案的工作：HTTP：/ /getbootstrap.com/css/#grid-responsive-resets – user3170702

必須使用container類拖顯示容器中的所有列。那麼當列號達到12列時，必須使用新的row類再次在前一列的下一個位置再次設置新列。使用下面

<div class="container"> 
<div class="row"> 
<div class="col-md-4"> 
    // lot of content 
</div> 
<div class="col-md-4"> 
    // lot of content 
</div> 
<div class="col-md-4"> 
    // little content 
</div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    // stays on right side below previous item 
</div> 
</div> 
</div>

來源

2015-06-04 09:04:38

謝謝，這是我之前做的，但我希望這可以與多個類（例如「col-sm-6 col-md-4」）一起使用。我應該提到這一點。 – user3170702

你沒有在最後一個'col-md-4'類中使用'row'類。然後我的代碼可以在沒有任何問題的情況下與每個多個類一起工作，例如，您可以將'col-sm-4'與'col-md-4'或'col-lg-4'放在一起， –

Bootstrap在移動到下一行時清除前一列

回答

相關問題