twitter-bootstrap - 使用 flexbox 在 Bootstrap 4 中垂直对齐

Question

想知道您是否可以帮助我解决有关 Bootstrap 4 的这个令人沮丧的细节:

我使用了本页 https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment 中的代码探索 align-self-start flexbox 对齐方式。但是，他们放入示例中的代码不起作用。有没有什么不是很复杂的方法可以使用类似的术语使其工作？或者这段代码现在完全无效:

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

谢谢!

Answer 1

为了能够真正看到差异，给行一个最小高度。

.row {
  border: 1px solid red;
  min-height: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
  </div>
</div>