我在看一个使用card-deck
和card
类(Pricing example)的Bootstrap示例,我想知道如果其中一个列表的项比其他列表少,如何修复按钮对齐。
我希望所有的按钮都垂直对齐(在每张卡片的底部),但我找不到这样做的方法。我尝试设置.align-bottom
类,并将按钮 Package 在<div class="align-text-bottom">
中。我也尝试了this question about adding space的几个建议,但仍然没有成功(间距也应该是可变的,这样它就可以填充列表中的剩余空间)。
在<div class="card-footer bg-white">
中换行也没有产生预期的结果,因为它没有对齐卡片底部的按钮,并且在它周围创建了某种边框。
有人有什么想法吗?
**编辑:**这里有一个类似于该问题的jsfiddle。
9条答案
按热度按时间agxfikkp1#
可以使用以下Bootstrap 4修饰符类:
1.将
d-flex
加到.card-body
1.将
flex-column
加到.card-body
1.将
mt-auto
添加到嵌套在.card-body
中的.btn
fiddle
有关Bootstrap 4的flexbox修改类的完整列表,请参考this page。
5sxhfpxr2#
类似的问题还有answered here。
只需将
align-self-end
类添加到item中,以在底部对齐。https://www.codeply.com/go/Fiorqv1Iz6
默认情况下,
card
是display:flex,但card-body
不是。因此,您需要将d-flex flex-column
添加到card-body
。这将使flexbox对齐类工作。另一个选择是使用
mt-auto
(自动顶部边距)的按钮,这将推动它到卡的底部。31moq8wy3#
将
.card-body
div设置为display:flex
与flex-direction:column
.然后给予按钮
margin-top:auto
。我想有引导帮助类。
第一个
lc8prwob4#
使用页脚,它已经为您设置了所有内容。
然后,您可以选择性地设定card-footer项目的样式。
演示:https://jsfiddle.net/rustynox/203zwyq6/
7fhtutme5#
在卡片中添加页脚
您可以为每张卡片设置页脚,如下所示:
yhuiod9q6#
用包含类的div标签将卡片中的按钮括起来,并使用mt-auto
x759pob27#
Flex是您的朋友
类似这样的东西会产生魔力:
第一个
7kqas0il8#
示例为(d-flex伸缩柱)
ctzwtxfj9#
这个问题主要是卡片的文字不均匀造成的,所以我找了两个小时,最好的答案就是在文字比较少的卡片上加上这一行:
我知道这不是解决问题的好方法,但这是我发现的最简单的方法。