如何對齊不同內容長度的Bootstrap卡片底部的按鈕？

使用Bootstrap 在卡片底部對齊按鈕

使用Bootstrap 卡組時遇到的一個常見挑戰是當某些卡片具有垂直對齊按鈕時，垂直對齊按鈕較少的項目。該問題的出現​​是由於卡片之間的列表長度存在差異。

要解決此問題，您可以使用以下Bootstrap 4 修飾符類：

1. d-flex to .card-body：這為卡片建立了一個彈性盒容器body.
2. flex-column 至.card-body：將 Flexbox 容器設定為垂直方向。
3. mt-auto 至 .btn嵌套在 .card-body 中：新增自動間距以將按鈕定位在卡片底部

HTML範例：

<div class="card">
  <div class="card-body d-flex flex-column">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
    </ul>
    <button class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

小提琴示範：

請參考以下小提琴現場示範： https://jsfiddle.net/IGN7K/

透過實作這些類，您可以確保按鈕在所有卡片的底部一致對齊，無論其內容長度為何。

以上是如何對齊不同內容長度的Bootstrap卡片底部的按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！