Wie kann ich in Bootstrap ein 5-Spalten-Layout erstellen?-CSS-Tutorial-php.cn

Wie kann ich in Bootstrap ein 5-Spalten-Layout erstellen?

Patricia Arquette

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

Original

378 Leute haben es durchsucht

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

Bootstrap – Erstellen eines 5-Spalten-Layouts

In Bootstrap kann das Erstellen eines Layouts mit fünf Spalten voller Breite mit den folgenden Methoden erreicht werden:

Option 1: Automatisches Layout-Raster (Bootstrap 4)

Verwenden Sie für Bootstrap 4 das automatische Layout-Raster, um fünf Spalten mit gleicher Breite und voller Breite zu erstellen:

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

Nach dem Login kopieren

Option 2: Clearfix Break (Bootstrap 4)

Um die Spalten innerhalb derselben Zeile umzubrechen, fügen Sie nach jeweils fünf Spalten einen Clearfix Break ein:

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

Nach dem Login kopieren

Option 3: row-cols-5 Klasse (Bootstrap 4.4)

Für Bootstrap-Versionen 4.4 und höher verwenden Sie die Klasse row-cols-5 für das Zeilenelement:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich in Bootstrap ein 5-Spalten-Layout erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!