我在看一个使用card-deckcard类(Pricing example)的 bootstrap 示例.我想知道,如果其中一个列表中的项目比其他列表中的项目少,如何修复按钮对齐.

Alignment issue

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

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

有谁有主意吗?

Edit:这里是jsfiddle分,和这个问题类似.

推荐答案

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

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

fiddle

有关Bootstrap 4的Flexbox修改类的完整列表,请参阅this page.

Html相关问答推荐

如何使div按钮链接到另一个网页

动态FormControl值在Angular 上绑定错误的问题

如何在伪元素背景中定位多个CSS径向梯度

为什么在移动视图中,这个水平可滚动的表格会在表格的右侧显示额外的空间?

轨道上的居中范围滑块拇指(Webkit)

OnChange函数未在下拉列表中使用一个选项触发

不呈现孙子元素,使用R htmlTools::Taglist为分页的pdf生成HTML

如何将图像放在其内部按钮下方

网格中的图像zoom 不正确

如何保持块扩展以填充视口?

伪元素:after和溢出隐藏

如何让一个 div 始终贴在容器的边缘?

从垫分页器中删除输入边框

如何截断一些文本并用双引号引起来?

如何制作一个空的网格模板行来填充剩余空间?

获取 div 中每个元素的 href 并使用它

按部分划分的表行带

如何在单击按钮时切换 Blazor 中的类?

Flexbox 链接 colored颜色 不符合父级规则

向卡片添加过渡