如何垂直對齊不同清單長度的 Bootstrap 卡底部的按鈕？

具有不同清單長度的Bootstrap 卡中按鈕的垂直對齊

在Bootstrap 項目中，您可能會遇到有一系列的情況具有不同列表長度的卡片。如果您希望這些卡片中的所有按鈕在底部垂直對齊，則預設樣式可能會遇到困難。

要實現這種對齊，請考慮使用以下Bootstrap 4 修飾符類：

• d-flex 到.card-body
• d-flex 到.card-body
• flex-column 到.card-body

mt-auto

到.btn 嵌套在.card-body

這些類別將配置.card-body 以使用Flexbox 佈局，並設定按鈕(.btn) 自動佔據.card-body 中的剩餘空間垂直方向。

有關實際演示，請參閱此更新的jsfiddle：

[jsfiddle 連結]

其他注意事項：
• 其他注意事項：

您可以透過使用mr-auto 或ml-auto 等類別修改.btn 元素的邊距來自訂間距。 考慮使用響應式 Flex 公用程式（例如 d-block、d- md-none）在針對特定螢幕尺寸時。 透過實作這些技術，您可以確保 Bootstrap 卡中的按鈕垂直對齊並回應不同的內容長度。

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