CSS：相同的高度

Question

我有一个标准的bootstrap-grid。这些列的高度有时会导致这种情况：

而我需要的是：

我知道，通常这是通过连续分组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>

Answer 1

知道了！

解决方案确实是在每个第3个元素之后添加 clear：both ，因此下一个元素可能会中断。但由于网格应该是动态的并且切换列数量，因此不能直接在html中实现。

  

解决方案:: nth-child

@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列布局。

Answer 2

每3个div添加一个div：

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