如何對齊 Bootstrap 卡底部的按鈕？-css教學-PHP中文網

如何對齊 Bootstrap 卡底部的按鈕？

Linda Hamilton

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

原創

178 人瀏覽過

How to Align Buttons at the Bottom of Bootstrap Cards?

在Bootstrap 卡底部對齊按鈕

正如您所觀察到的，Bootstrap 卡中的按鈕對齊可能會出現問題，當它們對齊內容長短不一。若要有效對齊每張卡片底部的按鈕：

實作 Flexbox： 將 d-flex 類別新增至 .card-body 元素以啟用 Flexbox 版面配置。
新增列對齊方式： 在 .card-body 上使用 flex-column 類別來垂直對齊卡片內的內容。
使用 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中文網其他相關文章！