Wie erstelle ich, dass sich eine Bootstrap-3-Spalte über mehrere Zeilen erstreckt?

Bootstrap-Spalten über mehrere Zeilen verteilen

Das Erstellen eines Rasterlayouts mit Bootstrap kann eine unkomplizierte Aufgabe sein. Wenn man jedoch vor der Herausforderung steht, dass sich eine Spalte über mehrere Zeilen erstreckt, kann das etwas verwirrend sein. Diese Anleitung zeigt, wie Sie dies mit Bootstrap 3 erreichen.

Lösung für Bootstrap 3:

Um eine Spalte zu erstellen, die sich in Bootstrap 3 über zwei Zeilen erstreckt, befolgen Sie diese Schritte:

<div class="row">
  <div class="col-md-4">
    <div class="well">
      1
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <div class="well">
          2
        </div>
      </div>
      <div class="col-md-6">
        <div class="well">
          3
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="well">
          4
        </div>
      </div>
      <div class="col-md-6">
        <div class="well">
          5
        </div>
      </div>
    </div>
  </div>
</div>

Erklärung:

In diesem HTML-Code erstellen wir ein zweizeiliges Raster. Die erste Zeile enthält eine Spalte, die sich über vier Einheiten erstreckt, während die zweite Zeile zwei Spalten enthält, die sich jeweils über zwei Einheiten erstrecken. Die Spalte in der ersten Zeile erstreckt sich über zwei Zeilen, da sie nicht in der verschachtelten Zeilenstruktur enthalten ist.

Das obige ist der detaillierte Inhalt vonWie erstelle ich, dass sich eine Bootstrap-3-Spalte über mehrere Zeilen erstreckt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!