如何製作等高的Bootstrap 4卡列卡？

在Card-Columns 中製作等高的Bootstrap 卡

在Bootstrap 4 中，card-column 類別用於在列中顯示卡片，但卡片的高度可能會根據其內容而有所不同。為了實現等高的卡片，我們可以使用CSS和flexbox的組合。

解決方案：

我們可以使用而不是在卡片上設定固定的最小高度卡列中的列元素上的align-items-stretch 實用程式。這使得列延伸至最高卡片的整個高度。

.card-columns .col {
    align-items: stretch;
}

實現：

將卡片列包裹在一個容器中，並將每張卡片包裹在一個容器中列為如下：

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
    </div>
</div>

注意：

• 確保所有欄位的列寬（本例為col-lg-4）相同。
• 如果卡片上有任何背景或邊框，您可能需要調整 CSS 以確保邊框和背​​景對齊正確。

以上是如何製作等高的Bootstrap 4卡列卡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！