如何垂直对齐 Bootstrap 卡底部的按钮？

Bootstrap：垂直对齐卡片底部的按钮

在使用 Bootstrap 的卡片组和卡片类时，开发者经常会遇到对齐问题当一张卡片的列表项少于其他卡片时。这可能会导致卡片底部的按钮未对齐。

要解决此问题，请考虑使用以下 Bootstrap 4 修饰符类：

• d-flex 到 .card-body：启用 Flexbox 功能。
• flex-column 到 .card-body：将 Flexbox 项目排列在垂直列中。
• mt-auto 到 .btn 嵌套在 .card-body 中：通过将 margin-top 属性设置为“auto”，自动对齐列底部的按钮。

通过应用这些类，每个卡片内的按钮将自动调整其垂直位置以保持对齐，无论列表项的数量如何。

有关 Bootstrap 4 中可用的 Flexbox 修改类的完整列表，请参阅官方文档。

以上是如何垂直对齐 Bootstrap 卡底部的按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！