如何制作等高的Bootstrap 4卡列卡？

在 Card-Columns 中制作等高的 Bootstrap 卡

在 Bootstrap 4 中，card-column 类用于在列中显示卡片，但卡片的高度可能会根据其内容而有所不同。为了实现等高的卡片，我们可以使用CSS和flexbox的组合。

解决方案：

我们可以使用而不是在卡片上设置固定的最小高度卡列中的列元素上的align-items-stretch 实用程序。这使得列延伸至最高卡片的整个高度。

.card-columns .col {
    align-items: stretch;
}

实现：

将卡片列包裹在一个容器中，并将每张卡片包裹在一个容器中列为如下：

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
    </div>
</div>

注意：

• 确保所有列的列宽（本例中为 col-lg-4）相同。
• 如果卡片上有任何背景或边框，您可能需要调整 CSS 以确保边框和背景对齐正确。

以上是如何制作等高的Bootstrap 4卡列卡？的详细内容。更多信息请关注PHP中文网其他相关文章！