在Bootstrap 4行列中删除相等的高度

Question

我目前正在尝试使用新版本的Bootstrap，当使用更新的网格系统使用此代码（JSFiddle）分割两列时：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
    Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

每列都与高度匹配，这是我将要显示的内容的当前不希望的属性。

我已经进行了搜索，发现它不在Bootstrap 3中，现在默认情况下已引入Bootstrap 4中。

Answer 1

在Bootstrap 4上有flexbox实用程序，因此您可以添加.align-items-start到.row：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
      Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

Bootstrap使用flexbox格式化网格：

Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全响应能力。下面是一个示例，并深入研究了网格如何组合在一起。
来源： https : //getbootstrap.com/docs/4.0/layout/grid/

因此，您可以使用flexbox实用程序更改网格的行为。