Cara Membuat Kad Bootstrap dalam Lajur Kad Mempunyai Ketinggian Sama Tanpa Pengekodan Keras?

Cara Membuat Kad Bootstrap Mempunyai Ketinggian Sama Dalam Lajur Kad

Apabila bekerja dengan Bootstrap 4, anda mungkin menghadapi keperluan untuk membuat semua kad dalam susun atur lajur kad berkongsi ketinggian yang sama. Ini memastikan penampilan yang konsisten dan menarik dari segi visual.

Pernyataan Masalah

Menggunakan voorbeeld dalam dokumentasi Bootstrap, bagaimana anda boleh memaksa semua kad mempunyai ketinggian yang sama tanpa menggunakan kepada berkod keras penyelesaian?

Jawapan

Menambahkan Harta Item Jajar

Untuk mencapai ketinggian kad yang sama, anda boleh memanfaatkan penjajaran- sifat item pada elemen baris atau lajur yang mengandungi kad. Sifat ini menentukan cara item fleksibel dijajarkan secara menegak dalam bekasnya.

Pilihan 1: Gunakan pada Baris

Balut elemen lajur kad anda dalam elemen baris dan tambahkan align-item-stretch kelas kepadanya. Ini akan menjajarkan kad secara menegak, memastikan ia meregangkan ketinggiannya agar sepadan dengan kad tertinggi.

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

Pilihan 2: Gunakan pada Lajur

Sebagai alternatif, anda boleh menambah kelas align-item-stretch terus ke setiap elemen col. Ini akan menjajarkan kad secara menegak dalam setiap lajur, dengan berkesan menghasilkan ketinggian yang sama.

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

KEMASKINI untuk Bootstrap 5

Dalam Bootstrap 5, align-item- kelas regangan telah digantikan dengan kelas regangan-sejajar untuk kawalan yang lebih baik ke atas kad individu penjajaran.

<div class="row">
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
</div>

Nota: Menggunakan item penjajaran pada elemen baris akan menyembunyikan jidar kad, manakala menggunakannya pada elemen lajur tidak akan. Pilih kaedah yang paling sesuai dengan keperluan reka bentuk anda.

Atas ialah kandungan terperinci Cara Membuat Kad Bootstrap dalam Lajur Kad Mempunyai Ketinggian Sama Tanpa Pengekodan Keras?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!