Bagaimana untuk membuat susun atur 5 lajur dalam Bootstrap 4?

Bootstrap - 5 susun atur lajur

Anda ingin mencapai susun atur lebar penuh 5 lajur menggunakan Bootstrap tetapi tidak menemui penyelesaian yang bersesuaian dengan keperluan anda.

Bootstrap 4 menawarkan penyelesaian mudah menggunakan grid reka letak automatik. Untuk mencipta 5 lajur yang sama lebar penuh, gunakan kod berikut:

<code class="html"><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></code>

Penyelesaian ini berfungsi kerana Bootstrap 4 menggunakan flexbox. Untuk membalut lajur dalam baris yang sama, gunakan pemisah clearfix seperti

Untuk Bootstrap 4.4 dan lebih baru, anda boleh menggunakan kelas row-cols-5 pada baris:

<code class="html"><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></code>

Atas ialah kandungan terperinci Bagaimana untuk membuat susun atur 5 lajur dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!