如何對齊卡片底部的 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中文網其他相關文章！