如何在Bootstrap 4.0中禁用相同高度的列

Question

在花了好几个小时弄清楚为什么所有列都设置为相同高度后，我得知引导程序现在自动以这种方式在v4中发布了。如何将其关闭并破坏v3的常规列？

谢谢。

<div class="container">
          <div class="row">
             <div class="col-sm-8">
              <p> Hi, I'm a small container. </p>
             </div>
             <div class="col-sm-4">
              <h1> Hi, I'm a much bigger container. </h1>
             </div>
          </div>
   </div>

在此示例中，较小的div的高度被拉伸，因此它与较大的文本的高度相同。这就是我要避免的。

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>