首頁 > web前端 > css教學 > 如何垂直對齊 Bootstrap 卡底部的按鈕?

如何垂直對齊 Bootstrap 卡底部的按鈕?

Patricia Arquette
發布: 2024-11-08 22:27:02
原創
750 人瀏覽過

How Can I Vertically Align Buttons at the Bottom of Bootstrap Cards?

Bootstrap:垂直對齊卡片底部的按鈕

在使用Bootstrap 的卡片組和卡片類時,開發者經常會遇到對齊問題當一張卡片的列表項目少於其他卡片時。這可能會導致卡片底部的按鈕未對齊。

要解決此問題,請考慮使用以下 Bootstrap 4 修飾符類:

  • d-flex 到 .card-body:啟用 Flexbox功能。
  • flex-column 到 .card-body:將 Flexbox 項目排列在垂直列中。
  • mt-auto 到.btn嵌套在.card-body 中:透過將margin-top 屬性設定為,自動對齊列底部的按鈕「自動。」

透過套用這些類,每張卡片內的按鈕將自動調整其垂直位置以保持對齊,無論清單項目的數量如何。

對於一個完整的Bootstrap 4 中可用的 flexbox 修改類別列表,請參閱官方文件。

以上是如何垂直對齊 Bootstrap 卡底部的按鈕?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板