CSS：同一高度

我有一個標準的引導電網。列在他們的高度不同，有時這會導致這樣的：CSS：同一高度

相反，我需要的是這樣的：

我知道，這通常是由一排分組3項實現。但是：當瀏覽器調整大小時，它會從3列變爲2列，然後是1列布局。那麼如何在不使用多行的情況下實現相同的效果？

代碼：

<section class="container margin_60"> 
    <div class="row"> 
    <div class="col-md-4 col-sm-6"> 
     // content 
    </div> 
    <div class="col-md-4 col-sm-6"> 
     // content 
    </div> 
    .... 
    </div> 
</section>

來源

2017-02-23 mstoldt

顯示你的代碼，請。 –

@SergeyDenisov我添加的代碼 – mstoldt

每3之後的div添加DIV：

<div style="clear: both;"></div>

來源

2017-02-23 10:29:57

沒有，因爲當電網變爲2列布局的網站不工作 – mstoldt

@mstoldt OK，然後讓該CSS類，並添加它。 –

明白了！

該解決方案的確是要加上一個明確：每個第三個元素後面都有，所以下一個元素可以中斷。但由於網格應該是動態的，並且需要切換列的數量，所以它不能直接在html中實現。

解決方案：：第n個孩子

@media (min-width: 992px) { 
    .my-grid-item:nth-child(3n+4) { 
    clear: both; 
    } 
}

對於3列布局和

@media (max-width: 991px) { 
    .my-grid-item:nth-child(2n+3) { 
    clear: both; 
    } 
}

2列和1列布局。

來源

2017-02-23 11:12:03 mstoldt

不需要添加'+ 4'。 '。我的網格項：第n個孩子（3N）'是不夠的;） –

通過自舉推薦解決方案是使用'clearfix'在[特定響應斷點]（http://getbootstrap.com/css/#電網響應，重置）。這樣你可以避免自定義CSS。 – ZimSystem

CSS：同一高度

回答

相關問題