如何在 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中文网其他相关文章！