如何在不進行硬編碼的情況下使卡片列中的 Bootstrap 卡具有相等的高度？

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

使用Bootstrap 4 時，您可能會遇到需要使所有卡片在卡片列佈局中，它們具有相同的高度。這確保了一致且視覺上令人愉悅的外觀。

問題陳述

使用 Bootstrap 文件中的 voorbeeld，如何在不重新排序的情況下強制所有卡片具有相同的高度硬編碼解決方案？

答案

加上Align-Items屬性

要實現相等的卡片高度，您可以利用卡片的行或列元素的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中文網其他相關文章！