如何在不进行硬编码的情况下使卡列中的 Bootstrap 卡具有相等的高度？-css教程-PHP中文网

如何在不进行硬编码的情况下使卡列中的 Bootstrap 卡具有相等的高度？

Susan Sarandon

发布： 2024-12-14 09:41:10

原创

196 人浏览过

How to Make Bootstrap Cards in Card Columns Have Equal Height Without Hardcoding?

如何使 Bootstrap 卡在卡列中具有相同的高度

使用 Bootstrap 4 时，您可能会遇到需要使所有卡片在卡片列布局中，它们具有相同的高度。这确保了一致且视觉上令人愉悦的外观。

问题陈述

使用 Bootstrap 文档中的 voorbeeld，如何在不重新排序的情况下强制所有卡片具有相同的高度硬编码解决方案？

答案

添加Align-Items属性

要实现相等的卡片高度，您可以利用align-包含卡片的行或列元素的 items 属性。此属性指定 Flex 项目如何在其容器内垂直对齐。

选项 1：在行上使用

将卡片列元素包裹在行元素中，并添加为其对齐items-stretch 类。这将垂直对齐卡片，确保它们拉伸高度以匹配最高的卡片。

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

登录后复制

选项 2：在列上使用

或者，您可以添加align-items-stretch 类直接指向每个 col 元素。这将在每列内垂直对齐卡片，从而有效地实现相等的高度。

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

登录后复制

Bootstrap 5 的更新

在 Bootstrap 5 中，对齐项目-拉伸类已替换为对齐自拉伸类，以便更好地控制单个卡

<div class="row">
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
</div>

登录后复制

注意：在行元素上使用align-items将隐藏卡片的边框，而在列元素上使用则不会。选择最适合您设计要求的方法。

以上是如何在不进行硬编码的情况下使卡列中的 Bootstrap 卡具有相等的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！