如何在卡列中创建等高引导卡？

卡片列中的等高 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 class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="..." alt="">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="..." alt="">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="..." alt="">
                <div class="card-body">...</div>
            </div>
        </div>
    </div>
</div>

以上是如何在卡列中创建等高引导卡？的详细内容。更多信息请关注PHP中文网其他相关文章！