Wie erstelle ich mehrzeilige Spalten in Bootstrap 3 und Bootstrap 4?

Mehrzeilige Bootstrap-Spalten

Problem:
Erstellen eines Bootstrap-Rasters, in dem sich eine bestimmte Spalte über mehrere Spalten erstreckt Zeilen, insbesondere wenn Boxen programmgesteuert generiert werden Sequenz.

Lösung:

Bootstrap 3:

1. Erstellen Sie ein äußeres .row-Div, um das Gesamtbild zu definieren Inhaltsbreite.
2. Fügen Sie innerhalb der äußeren Zeile die Spalte div (
   ) hinzu, um zwei zu umfassen Zeilen.
3. Erstellen Sie eine weitere innere Zeile innerhalb der zweizeiligen Spalte.
4. Fügen Sie untergeordnete Spaltendivs (
   ) innerhalb der inneren Zeile(n) nach Bedarf hinzu, um den verbleibenden Platz zu füllen .

Bootstrap 4:

1. Erstellen Sie ein äußeres .container- oder .container-fluid-Div, um die Inhaltsbreite zu definieren.
2. Fügen Sie ein äußeres .row-Div hinzu.
3. Fügen Sie innerhalb der äußeren Zeile die Spalte div (
   ) hinzu, um zwei zu umfassen Zeilen.
4. Erstellen Sie eine weitere innere .row innerhalb der zweizeiligen Spalte mit der Klasse .w-100 für das innere Spalten-Div (
   ), um zu erzwingen, dass es sich über die gesamte Breite erstreckt.
5. Fügen Sie nach Bedarf untergeordnete Spaltendivs (
   ) innerhalb der inneren Zeile(n) hinzu, um die verbleibenden zu füllen Leerzeichen.

Beispielcode:

Bootstrap 3:

<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><p><strong>Bootstrap 4: </strong></p>
<pre class="brush:php;toolbar:false"><div class="container">
  <div class="row">
    <div class="col">
      <div class="well">1
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">2</div>
      </div>
      <div class="col">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">4</div>
      </div>
      <div class="col">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div>

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