Wie erstelle ich ein 5-Spalten-Layout in Bootstrap 4?

Bootstrap – 5-Spalten-Layout

Sie möchten mit Bootstrap ein 5-Spalten-Layout in voller Breite erreichen, haben aber keine Lösung gefunden das Ihren Bedürfnissen entspricht.

Bootstrap 4 bietet eine einfache Lösung mit dem Auto-Layout-Raster. Um 5 gleiche Spalten voller Breite zu erstellen, verwenden Sie den folgenden Code:

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

Diese Lösung funktioniert, weil Bootstrap 4 Flexbox verwendet. Um die Spalten innerhalb derselben Zeile umzubrechen, verwenden Sie einen Clearfix-Umbruch wie

oder

alle 5 Spalten.

Für Bootstrap 4.4 und höher können Sie die Klasse row-cols-5 für die Zeile verwenden:

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

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