Wie erstelle ich eine Bootstrap-4-Zeilen-Füllung mit verbleibender Höhe?

Bootstrap 4: Verbleibende Höhe in Zeilen füllen

In Bootstrap 4 kann das Erstellen einer Zeile, die den verbleibenden vertikalen Raum vollständig einnimmt, eine Herausforderung sein. Standardmäßig funktioniert das Hinzufügen der h-100-Klasse zur Zeile nicht wie beabsichtigt.

Lösung: Flexbox

Um eine Zeile zu strecken, um die verbleibende Höhe auszufüllen, Verwenden Sie die Bootstrap 4.1-Flexbox-Eigenschaft flex-grow-1. Diese Klasse ermöglicht es einem Element, zu wachsen, um den verbleibenden verfügbaren Platz in seinem Container zu füllen.

Implementierung

So implementieren Sie die Lösung:

1. Behälterhöhe hinzufügen: Stellen Sie die Höhe des Behälterelements (Behälterflüssigkeit) auf ein 100 %.
2. Spalte in einer Flexbox-Spalte verschachteln: Wickeln Sie die Spalte in ein Div mit den Klassen d-flex und flex-column ein.
3. Flex anwenden -grow-1: Fügen Sie die Klasse „flex-grow-1“ zu der Zeile hinzu, die den Rest füllen soll Höhe.

Beispielcode

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

Ergebnis:

Die blaue Zeile (REIHE 2) wird Erweitern Sie nun, um die verbleibende Höhe der roten Spalte auszufüllen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Bootstrap-4-Zeilen-Füllung mit verbleibender Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!