Bagaimana untuk Membuat Kad Bootstrap 4 Kad-Lajur yang Sama Tinggi?

Membuat Kad Bootstrap yang Sama Tinggi dalam Lajur Kad

Dalam Bootstrap 4, kelas lajur kad digunakan untuk memaparkan kad dalam lajur , tetapi ketinggian kad mungkin berbeza-beza bergantung pada kandungannya. Untuk mencapai kad ketinggian yang sama, kami boleh menggunakan gabungan CSS dan flexbox.

Penyelesaian:

Daripada menetapkan ketinggian minimum tetap pada kad, kami boleh menggunakan utiliti align-item-stretch pada elemen lajur dalam lajur kad. Ini menjadikan lajur meregang ke ketinggian penuh kad yang paling tinggi.

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

Pelaksanaan:

Balut lajur kad anda dalam bekas dan setiap kad dalam satu lajur sebagai berikut:

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

Nota:

• Pastikan bahawa lebar lajur (col-lg-4 dalam contoh ini) adalah sama untuk semua lajur.
• Jika terdapat sebarang latar belakang atau sempadan pada kad, anda mungkin perlu melaraskan CSS untuk memastikan sempadan dan latar belakang sejajar betul.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kad Bootstrap 4 Kad-Lajur yang Sama Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!