Wie vermeide ich leeren vertikalen Raum zwischen Spalten in Bootstrap 4?

Leerer vertikaler Raum zwischen Spalten in Bootstrap 4

Bootstrap 4 führt Flexbox ein, was dazu führt, dass Spalten dieselbe Höhe wie die höchste Spalte haben. Dadurch entsteht in bestimmten Szenarien ein unerwünschter Leerraum zwischen den Spalten.

Flexbox-Ausrichtung und Leerraum

Bedenken Sie Folgendes:

• Spalte A: Beschreibung (Groß)
• Spalte B: Seitenleiste (Kurz)
• Spalte C: Kommentare (Groß)

Flexbox richtet Spalten vertikal aus, was zu Folgendem führt:

------------------  ---------
|                  ||         |
|                  ||         |
------------------ |         |
------------------ |         |
|                  ||         |
------------------  ---------

Aber wir wünschen:

------------------  ---------
|                  |
 ------------------  
|                  |
 ------------------ |         |
|                  ||         |
 -------------------  ---------

Schwimmt als Problemumgehung

Bootstrap 3 verwendete Floats, was es Spalten ermöglicht, zu schweben und nur den Platz einzunehmen, den sie benötigen. Um dies in Bootstrap 4 zu erreichen:

<div>
<p>Die d-lg-block-Klasse erzwingt display:block für die Zeile, sodass Spalten auf großen Bildschirmen schweben können.</p>
<p><strong>Verschachtelung und Auftragserhaltung</strong></p>
<p>Das Verschachteln von Spalten wie folgt scheint wie eine Lösung:</p>
<pre class="brush:php;toolbar:false"><div><p>Dies beeinträchtigt jedoch die Spaltenreihenfolge. Im obigen Beispiel wird die Seitenleiste aufgrund der automatischen Anordnung verschachtelter Zeilen auf kleinen Bildschirmen zuletzt angezeigt.</p></div>