使用Bootstrap 在卡片底部對齊按鈕
使用Bootstrap 卡組時遇到的一個常見挑戰是當某些卡片具有垂直對齊按鈕時，垂直對齊按鈕較少的項目。該問題的出現是由於卡片之間的列表長度存在差異。
要解決此問題，您可以使用以下Bootstrap 4 修飾符類：
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中文網其他相關文章！
