您如何 "end" 对齐 Bootstrap 4 中的弹性列，同时保持它们的高度相同？

Question

我仍在努力了解 Bootstrap 中新的 Flex 内容。我必须承认，在此之前我并没有真正使用过 Flex（因为它在很多旧版本中都没有得到适当的支持）。

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

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

这是我正在使用的代码：

<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

每个弹性项目都有一个 Bootstrap class 将其与容器底部对齐：align-self-end

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

解决方案

试试这个：

从所有弹性项目中删除 align-self-end。（现在默认 stretch 为准，项目为全高。）
使每个弹性项目成为（嵌套的）弹性容器。
给这个新容器align-items: flex-end.

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

简而言之，解决方案是删除 Bootstrap align-self-end class 并将其添加到您的 CSS:

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

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

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

revised codepen

您如何 "end" 对齐 Bootstrap 4 中的弹性列，同时保持它们的高度相同？

How do you "end" align a flex column in Bootstrap 4, whilst keeping them the same height?

css

flexbox

bootstrap-4

twitter-bootstrap-4

问题

解决方案