如何在卡片列中建立等高引導卡？

卡片列中的等高 Bootstrap 卡

使用 Bootstrap 的卡片列類時，不同高度的卡片可能會創建不均勻的佈局。要實現等高卡片，請考慮以下解決方案：

在列上使用align-items-stretch

在包含card-columns類的父行中，新增實用程式類別d- flexalign -items-拉伸到每一列。這將垂直對齊卡片內容，有效地創建等高的卡片：

<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>

Bootstrap 5 (BS5) 範例

以下完整的HTML 範例示範了align-items-stretch 解決方案BS5 中：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
    </div>
</div>

以上是如何在卡片列中建立等高引導卡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！