你如何“结束”对齐Bootstrap 4中的弹性柱，同时保持它们的高度相同？

Question

我仍然试图用Bootstrap中的新Flex内容来解决一些问题。我不得不承认，在此之前我并没有真正使用过Flex（因为它在很多旧版本中都没有得到适当的支持）。

无论如何，这是我正在做的CodePen：

http://codepen.io/youradds/pen/egLoVq

基本上，我希望所有列的高度相同 BUT 将内容与单元格的底部对齐。

这是我正在使用的代码：

<div class="btn-group" data-toggle="buttons">
      <label class="btn btn-secondary align-self-end">
        <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
        Piscine
      </label>
      <label class="btn btn-secondary align-self-end">
        <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
        foo bar<br>
        foo bar<br>
        foo bar<br>
      </label>
      <label class="btn btn-secondary align-self-end">
        <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
        foo bar<br>
        foo bar<br>
      </label>
      <label class="btn btn-secondary align-self-end">
        <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
        foo bar<br>
        foo bar<br>
        foo bar<br>
        foo bar<br>
      </label>    
      <label class="btn btn-secondary align-self-end">
        <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
        foo bar<br>
        foo bar<br>
        foo bar<br>
      </label>    
</div>    

但正如您所看到的，它不会使行保持相同的高度：

我尝试了很多东西，但我似乎无法让它发挥作用。任何建议将不胜感激。

Answer 1

问题

您有一个弹性容器：div.btn-group

您有五个弹性项：label.btn

每个flex项都有一个Bootstrap类，将其与容器底部对齐：align-self-end

使用上面的代码，您的弹性项目将不再占据容器的整个高度，因为align-self-end类将覆盖默认设置align-self: stretch。

解决方案

试试这个：

1. 从所有弹性项目中删除align-self-end。 （现在默认为stretch，且项目为全高。）

2. 将每个弹性项目设为（嵌套）弹性容器。

3. 提供此新容器align-items: flex-end。

这允许主要项目保持其全高，同时将嵌套项目（实际内容）与底部对齐。

简而言之，解决方案是删除Bootstrap align-self-end类并将其添加到CSS中：

.btn {
  display: flex;
  align-items: flex-end;
}

或者，在Bootstrap代码中，将每个label元素调整为如下所示：

<label class="btn btn-secondary d-flex align-items-end">

revised codepen