Wie erstelle ich in Bootstrap ein fünfspaltiges Layout?

Bootstrap 5-Spalten-Layout

In dieser Frage versucht der Benutzer, mit Bootstrap ein fünfspaltiges Layout zu erstellen, es treten jedoch Probleme auf. Um dieses Problem zu lösen, werden wir verschiedene Ansätze mit verschiedenen Bootstrap-Klassen und Grid-Systemen untersuchen.

Verwendung von Container- und Zeilenklassen

Der vom Benutzer bereitgestellte ursprüngliche Code enthielt eine Containerklasse mit einer Zeile und mehrere verschachtelte Spalten. Um ein echtes fünfspaltiges Layout mit gleichen Breiten zu erreichen, bietet der in Bootstrap 4 verwendete Auto-Layout-Raster-Ansatz eine einfachere Lösung.

Auto-Layout-Raster (Bootstrap 4)

Durch die Verwendung der Container-Fluid-Klasse anstelle von Container können Sie ein Auto-Layout-Raster erstellen, das automatisch gleiche Breiten an untergeordnete Elemente verteilt. Die verschachtelten div-Elemente innerhalb der Zeile füllen dann die Breite des Containers gleichmäßig aus.

<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-Klasse (Bootstrap 4.4 und höher)

Ab Bootstrap 4.4 eine neue Klasse namens row-cols-5 wurde eingeführt. Diese Klasse vereinfacht die Erstellung eines fünfspaltigen Layouts innerhalb einer Zeile.

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

Durch die Verwendung dieser Ansätze können Sie mit Bootstrap ein flexibles und reaktionsfähiges fünfspaltiges Layout erstellen. Denken Sie daran, die Klassen basierend auf der spezifischen Bootstrap-Version anzupassen, die Sie verwenden.

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