如何使 Bootstrap 4 列的高度都相同？

Question

免责声明。 这个问题以前被问过 很多 次。但随着时间的流逝，现在我们已经接近具有完整 flexbox 支持的 Bootstrap 4 版本，是时候为同一个问题寻找新答案了。

我想用 Bootstrap 4 创建相等的列高。这是预期结果的演示：

我想要一个适用于所有浏览器的解决方案，它受 Bootstrap 4 支持。如果不涉及 JS，那就更好了。一些现有的解决方案基于 Bootstrap 3，一些不适用于 MacOS 上的 Safari。

更新。 看来我做错了研究。默认情况下，Bootstrap 4 具有相同的高度。我已经包含了一个带有插图的更新图像。你不需要做任何事情，它已经在那里了。

原文由 dandaka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您只需将 class="row-eq-height" 与您的 class="row" 一起使用，即可为以前的引导程序版本获得相等的高度列。

但是对于 bootstrap 4，这是本机的。

检查此链接–http://getbootstrap.com.vn/examples/equal-height-columns/

原文由 neophyte 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

等高列是 Bootstrap 4 网格的默认行为。

 .col { background: red; }
.col:nth-child(odd) { background: yellow; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
      <br>
      Line 2
      <br>
      Line 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议