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：同一高度

回答

相关问题