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

Beseitigen vertikaler Abstände in Bootstrap 4-Spalten

In Bootstrap 4 werden Spalten mit unterschiedlichen Höhen tendenziell vertikal ausgerichtet, was zu leerem Raum zwischen ihnen führt . Dies liegt daran, dass Bootstrap 4 Flexbox verwendet, wodurch sich die Spalten an die Höhe der höchsten Spalte anpassen.

Um diesem Problem entgegenzuwirken, können Sie Floats verwenden, eine Problemumgehung ähnlich wie Bootstrap 3. Hier ist eine aktualisierte HTML-Struktur:

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

In diesem Beispiel legt die Klasse „d-lg-block“ „display:block“ für die Zeile in großen Bildschirmen fest, sodass die Spalten stattdessen schweben können gebeugt zu sein. Durch die Verwendung von Gleitkommazahlen können Sie die Spaltenreihenfolge steuern und gleichzeitig übermäßige vertikale Abstände verhindern.

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