如何对齐 Bootstrap 卡底部的按钮？-css教程-PHP中文网

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

Linda Hamilton

发布： 2024-11-09 16:52:02

原创

180 人浏览过

How to Align Buttons at the Bottom of Bootstrap Cards?

在 Bootstrap 卡底部对齐按钮

正如您所观察到的，Bootstrap 卡中的按钮对齐可能会出现问题，当它们内容长短不一。要有效对齐每张卡片底部的按钮：

实现 Flexbox： 将 d-flex 类添加到 .card-body 元素以启用 Flexbox 布局。
添加列对齐：使用 .card-body 上的 flex-colum 类垂直对齐卡片内的内容。
使用 Margin Auto 对齐按钮： 将 mt-auto 类添加到嵌套在 .card-body 中的 .btn 元素中。这会自动对齐卡体底部的按钮，垂直填充剩余空间。

请参阅以下代码片段作为示例：

<div class="card">
  <div class="card-body d-flex flex-column">
    <p>Card Content</p>
    <button type="button" class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

登录后复制

通过实现通过这些步骤，您可以确保 Bootstrap 卡中的所有按钮在各自的底部一致对齐，无论内容如何变化。

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