引导程序-将按钮对准卡的底部 [英] Bootstrap - align button to the bottom of card

问题描述

我正在偷看一个使用card-deck和card类的Bootstrap示例之一(

I was peeking at one of the Bootstrap examples that use the card-deck and card classes (Pricing example). I wondered how one can fix the button alignment if one of the lists has fewer items than the others.

我希望所有按钮都垂直对齐(在每张卡的底部)，但是我不知道这样做的方法.我尝试设置 .align-bottom 类，并将按钮包装在<div class="align-text-bottom">.我还尝试了关于添加空间的问题的一些建议，但是仍然没有成功(间隔应该是可变的，以使其充满列表中剩余的空间).

I would like all buttons to be vertically aligned (at the bottom of each card) but I couldn't figure out a way of doing this. I tried setting the .align-bottom class as well as wrapping the button in <div class="align-text-bottom">. I also tried several suggestions from this question about adding space however still no success (also the spacing should be variable such that it fills up the remaining space from the list).

在 <div class="card-footer bg-white"> 中包装并没有产生期望的结果会导致这种情况，原因是它未将卡底部的按钮对齐，并且在卡周围产生了某种边框.

Wrapping in <div class="card-footer bg-white"> didn't yield the desired result either as it doesn't align the button at the bottom of the card and it creates some kind of border around it.

有人有主意吗?

编辑:类似于问题的 jsfiddle .

推荐答案

您可以使用以下Bootstrap 4修饰符类:

You can use the following Bootstrap 4 modifier classes:

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

1. Add d-flex to .card-body
2. Add flex-column to .card-body
3. Add mt-auto to .btn nested in .card-body

小提琴

请参阅此页面，以获取有关Bootstrap 4的Flexbox修改类的完整列表.

Refer to this page for a full list of flexbox modifying classes for Bootstrap 4.

这篇关于引导程序-将按钮对准卡的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！