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

Umgang mit leerem vertikalen Raum zwischen Spalten in Bootstrap 4

Ein häufiges Problem bei der Arbeit mit Spalten in Bootstrap 4 ist das Vorhandensein von leerem vertikalen Raum zwischen ihnen, insbesondere in größere Ansichtsfenster. Dies kann auftreten, weil Bootstrap 4 ein Flexbox-Layout implementiert, das die Höhen von Spalten anpasst.

Verstehen des Verhaltens

In einem Flexbox-Layout haben alle Spalten innerhalb einer Zeile die gleiche Höhe wie die höchste Spalte. Wenn Sie beispielsweise drei Säulen mit unterschiedlichen Höhen haben, werden die beiden kürzeren Säulen vertikal erweitert, um der Höhe der höchsten Säule zu entsprechen. Als Ergebnis erscheint der leere Raum.

Lösung: Verwendung von Floats

Da das Verschachteln von Spalten die gewünschte Spaltenreihenfolge stören kann, besteht die Lösung in Bootstrap 4 darin, Floats zu verwenden. Dies ahmt das Verhalten von Bootstrap 3 nach, bei dem Spalten nebeneinander schweben würden.

Um den leeren vertikalen Raum zu entfernen, können Sie das folgende CSS verwenden:

.container {
  .row {
    display: block !important;
    .col {
      float: left;
    }
  }
}

Dieser Code überschreibt die Standard-Flexbox-Layout und legt die Anzeigeeigenschaft der zu blockierenden Zeile fest. Darüber hinaus wird die Float-Eigenschaft der Spalten auf „links“ gesetzt, sodass sie nebeneinander schweben können.

Beispielimplementierung

Hier ist eine Beispiel-HTML-Struktur, die Floats verwendet, um den leeren vertikalen Raum zu eliminieren :

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

Durch die Verwendung von Floats können Sie verhindern, dass der leere vertikale Raum angezeigt wird, und die gewünschte Spaltenreihenfolge auch in größeren beibehalten Ansichtsfenster.

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