Bagaimanakah cara membuat susun atur lima lajur dalam Bootstrap?

Reka Letak Lajur Bootstrap 5

Dalam soalan ini, pengguna cuba mencipta reka letak lima lajur menggunakan Bootstrap tetapi mengalami masalah. Untuk menyelesaikan masalah ini, kami akan meneroka pendekatan yang berbeza menggunakan pelbagai kelas Bootstrap dan sistem grid.

Menggunakan Kelas Bekas dan Baris

Kod awal yang disediakan oleh pengguna termasuk kelas kontena dengan baris dan berbilang lajur bersarang. Untuk mencapai reka letak lima lajur sebenar dengan lebar yang sama, pendekatan grid reka letak automatik yang digunakan dalam Bootstrap 4 menawarkan penyelesaian yang lebih mudah.

Grid Reka Bentuk Automatik (Bootstrap 4)

Dengan menggunakan kelas bendalir bekas dan bukannya bekas, anda boleh membuat grid reka letak automatik yang secara automatik mengedarkan lebar yang sama kepada elemen anak. Elemen div bersarang dalam baris kemudiannya akan mengisi lebar bekas dengan sama rata.

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

row-cols-5 Class (Bootstrap 4.4 dan Kemudian)

Setakat Bootstrap 4.4, kelas baharu dipanggil row-cols-5 telah diperkenalkan. Kelas ini memudahkan penciptaan reka letak lima lajur dalam satu baris.

<div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div>

Dengan menggunakan pendekatan ini, anda boleh mencipta reka letak lima lajur yang fleksibel dan responsif menggunakan Bootstrap. Ingat untuk melaraskan kelas berdasarkan versi Bootstrap tertentu yang anda gunakan.

Atas ialah kandungan terperinci Bagaimanakah cara membuat susun atur lima lajur dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!