如何实现Bootstrap 4列中卡片的等高？

等于列中 Bootstrap 4 卡的高度

如上所述，Bootstrap 4 框架已经在列上实现了 Flexbox，这确保了它们最初的高度相同。要在这些列中实现相同的卡片高度，请考虑在卡片上使用 h-100 类。此类将高度设置为 100%，使卡片能够完全占据每列内的可用空间。

以下是如何使用 h-100 实现此功能的示例：

<code class="html"><div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
    </div>
</div></code>

此修改可确保每列中的卡片具有相同的高度，无论其内容如何。需要注意的是，之前包含卡片的 .card-deck 类不再需要。

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