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

So erstellen Sie ein Bootstrap 4, 5-Spalten-Layout

Das Erstellen eines 5-Spalten-Layouts in Bootstrap kann eine Herausforderung sein, aber mit ein paar einfachen Schritten ist es möglich Schritte.

1. Beginnen Sie mit einem Container

Der erste Schritt besteht darin, einen Container für Ihre Spalten zu erstellen. Dies wird das übergeordnete Element für alle Ihre Spalten sein und sollte die Container-Fluid-Klasse haben.

<div class="container-fluid">
<h3 id="Fügen-Sie-eine-Zeile-hinzu">2. Fügen Sie eine Zeile hinzu</h3>
<p>Im Container müssen Sie eine Zeile hinzufügen. Dies ist der Container für Ihre Spalten und sollte die Zeilenklasse haben.</p>
<pre class="brush:php;toolbar:false"><div class="row">
<h3 id="Fügen-Sie-Ihre-Spalten-hinzu">3. Fügen Sie Ihre Spalten hinzu</h3>
<p>Innerhalb der Zeile müssen Sie Ihre Spalten hinzufügen. Jede Spalte sollte die Klasse col haben und die Anzahl der gewünschten Spalten hängt von dem Layout ab, das Sie erstellen möchten. Für ein 5-Spalten-Layout müssen Sie 5 Spalten hinzufügen.</p>
<pre class="brush:php;toolbar:false"><div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

4. Fügen Sie Ihren Spalten Inhalte hinzu

Sobald Sie Ihre Spalten hinzugefügt haben, können Sie ihnen Inhalte hinzufügen. Dies können Text, Bilder oder alles andere sein, was Sie möchten.

<div class="col">
  <h1 id="Column">Column 1</h1>
  <p>This is some content for column 1.</p>
</div>

5. Schließen Sie Ihre Tags

Sobald Sie alle Ihre Spalten hinzugefügt haben, müssen Sie die Zeilen- und Container-Tags schließen.