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

在卡片底部对齐 Bootstrap 按钮

问题陈述

使用 Bootstrap 的卡片组和卡片类时，当其中一个卡片内容的大小各不相同。当尝试垂直对齐每张卡片底部的按钮时，这个问题尤其明显。

解决方案

Bootstrap 4 提供的修饰符类为这一对齐挑战提供了优雅的解决方案：

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

代码修改

<div class="card-deck">
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 1 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 1</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 2 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 2</button>
      <button type="button" class="btn btn-primary mt-auto">Button 3</button>
    </div>
  </div>
</div>

结论

利用这些修饰符类会自动对齐卡片底部的按钮，无论内容如何变化。这确保了一致且具有视觉吸引力的演示。

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