html - Bootstrap - 将按钮对齐到卡片底部

Question

我正在查看使用 card-deck 的 Bootstrap 示例之一和 card类(Pricing example)。我想知道如果其中一个列表的元素少于其他列表，如何解决按钮对齐问题。

我希望所有按钮都垂直对齐(在每张卡片的底部)，但我想不出这样做的方法。我尝试设置 .align-bottom 类以及将按钮包装在 <div class="align-text-bottom"> 中.我还尝试了 this question about adding space 中的一些建议但是仍然没有成功(间距也应该是可变的，以便它填满列表中的剩余空间)。

包装在 <div class="card-footer bg-white"> 中也没有产生预期的结果，因为它没有对齐卡片底部的按钮，并且在它周围创建了某种边框。

有没有人有想法？

编辑:这是一个jsfiddle类似于问题。

Answer 1

您可以使用以下 Bootstrap 4 修改器类:

1. 将d-flex添加到.card-body
2. 将flex-column添加到.card-body
3. 将mt-auto添加到嵌套在.card-body中的.btn

fiddle

引用this page用于 Bootstrap 4 的 flexbox 修改类的完整列表。