Bootstrap 4：对齐 flexbox 项目内的项目

Question

我正在使用 Bootstrap 4 和 Flexbox 来对齐行内的列。我需要所有列的高度相同。所以我使用 class "align-items-stretch" (http://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items) 给它们相同的高度。现在我想把列里面的内容对齐到底部。

Flexbox 有办法吗？还是方法不对？

<div class="row d-flex align-items-stretch">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Answer 1

如果不知道列的内容，这很难回答。另外，我不明白 align-items-stretch 是如何给你的列全高的，因为 "stretch" 是默认值。有几种不同的方式可以用 Flexbox 来完成。

<div class="row d-flex">
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col align-self-end">
    </div>
</div>

http://www.codeply.com/go/Kaby5SlKgM

Bootstrap 4：对齐 flexbox 项目内的项目

Bootstrap 4: Align items inside flexbox item

html

css

flexbox

bootstrap-4

twitter-bootstrap-4