如何在 Bootstrap 卡列中實現相同的卡片高度？

Bootstrap 卡列：實現相等的卡高度

在Bootstrap 4 中，card-columns 類別允許創建美觀的佈局，其中多個卡排列在高度可變的柱子。然而，這可能會導致卡片高度不均勻，這可能並不理想。

為了實現統一的卡片高度，Bootstrap 提供了兩種解：

選項1：設定行或行的高度列元素

您可以透過在行或列元素上設定align-items-stretch實用程式類別來對齊卡片高度其中包含卡片。這將垂直拉伸卡片以填充可用空間。

<div class="container">
  <div class="row">
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
  </div>
</div>

選項2：Bootstrap 5 的Flexbox 解決方案

對於Bootstrap 5，以下CSS 程式碼可以用來使用Flexbox 在卡片列內實現相同的卡片高度屬性：

.card-columns {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

CodePen中的範例

有關 CodePen 中此解決方案的現場演示，請訪問以下連結：
https://codepen .io/Kerrys7777/pen/QWgwEeG

以上是如何在 Bootstrap 卡列中實現相同的卡片高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！