Wie eliminiere ich den vertikalen Abstand zwischen Spalten in Bootstrap 4?

Beseitigen des vertikalen Abstands zwischen Spalten in Bootstrap 4

Problemstellung:

In Bootstrap 4 , bei Verwendung eines zweispaltigen Layouts erscheint ein leerer vertikaler Raum zwischen den Spalten, wenn sich das Ansichtsfenster nicht im „mobilen Modus“ befindet.

Ursache:

Bootstrap 4 nutzt Flexbox, die die Höhe aller Spalten an die höchste anpasst.

Vorgeschlagene Lösung: Verwendung von Floats

Um den leeren Raum zu vermeiden, sollten Sie stattdessen die Verwendung von Floats in Betracht ziehen:

<div class="container">
  <div class="row d-lg-block">
    <div class="col-lg-9 float-left description">Desc</div>
    <div class="col-lg-3 float-right sidebar">Sidebar</div>
    <div class="col-lg-9 float-left comments">Comments</div>
  </div>
</div>

Erläuterung:

• Die d-lg-block-Klasse legt die Anzeigeeigenschaft der Zeile so fest, dass sie in großen Ansichtsfenstern blockiert, sodass die Spalten blockiert werden können float.

Zusätzliche Hinweise:

• Verschachtelte Spalten (
  ) erreichen in diesem Fall nicht die gewünschte Spaltenreihenfolge.
• Als Referenz wird im verwandten Thema „Bootstrap mit unterschiedlicher Reihenfolge in der mobilen Version“ ein ähnliches Problem behandelt.

Das obige ist der detaillierte Inhalt vonWie eliminiere ich den vertikalen Abstand zwischen Spalten in Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!