如何實現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中文網其他相關文章！