Bootstrap - 将按钮与卡片底部对齐 [英] 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 类以及将按钮包裹在

中.我还尝试了 这个关于添加空间的问题 的一些建议，但仍然没有成功(间距也应该是可变的，以便它填充删除列表中的剩余空间).

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.

Here is a jsfiddle that resembles the problem.

推荐答案

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

You can use the following Bootstrap 4 modifier classes:

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

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.

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