Bagaimana untuk Mencipta Kad Bootstrap Sama Tinggi dalam Lajur Kad?

Kad Bootstrap Ketinggian Sama dalam Lajur Kad

Apabila menggunakan kelas lajur kad Bootstrap, kad dengan ketinggian yang berbeza boleh mencipta reka letak yang tidak sekata. Untuk mencapai kad ketinggian yang sama, pertimbangkan penyelesaian berikut:

Menggunakan align-items-stretch pada Lajur

Dalam baris induk yang mengandungi kelas kad-lajur, tambahkan kelas utiliti d-flex align -item-regangkan ke setiap lajur. Ini akan menjajarkan kandungan kad secara menegak, menghasilkan kad yang sama tinggi dengan berkesan:

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

Contoh untuk Bootstrap 5 (BS5)

Contoh HTML penuh berikut menunjukkan penyelesaian align-item-stretch dalam BS5:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
    </div>
</div>

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