Bagaimanakah saya boleh membuat susun atur 5 lajur dalam Bootstrap?-tutorial css-php.cn

Bagaimanakah saya boleh membuat susun atur 5 lajur dalam Bootstrap?

Patricia Arquette

Lepaskan： 2024-10-27 10:05:31

asal

361 orang telah melayarinya

How can I create a 5-column layout in Bootstrap?

Bootstrap - Membuat Reka Letak 5 Lajur

Dalam Bootstrap, mencipta reka letak dengan lima lajur lebar penuh boleh dicapai menggunakan kaedah berikut:

Pilihan 1: Grid Auto-Layout (Bootstrap 4)

Untuk Bootstrap 4, gunakan grid auto-layout untuk mencipta lima lajur yang sama lebar dan lebar penuh:

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

Salin selepas log masuk

Pilihan 2: Clearfix Break (Bootstrap 4)

Untuk membalut lajur dalam baris yang sama, masukkan clearfix break selepas setiap lima lajur:

<code class="html"><div class="container">
    <div class="row">
        <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-12"></div> <!-- Clearfix break -->
        <div class="col">X</div>
    </div>
</div></code>

Salin selepas log masuk

Pilihan 3: row-cols-5 Kelas (Bootstrap 4.4 )

Untuk Bootstrap versi 4.4 dan lebih baru, gunakan kelas row-cols-5 pada elemen 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>

Salin selepas log masuk

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