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

Question

我苦苦思索了为什么我的所有列都设置为相同的高度后，我了解到 bootstrap 现在在 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>

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

How to disable same height columns in bootstrap 4.0

multiple-columns

twitter-bootstrap-4