Wie fülle ich die verbleibende Höhe mit einer Zeile in Bootstrap 4?

Bootstrap 4: Verbleibende Höhe mit einer Zeile füllen

Eine Zeile zu erreichen, die die verbleibende verfügbare Höhe in Bootstrap 4 überspannt, kann eine Herausforderung sein, aber es ist möglich. Lassen Sie uns untersuchen, wie Sie dies mithilfe der Klasse „flex-grow-1“ erreichen können.

Aktuelles Problem und Ursache

In Ihrem bereitgestellten Code verwenden Sie h-100 für Legen Sie die Höhe sowohl der Zeile als auch der verschachtelten Spalte fest. Dieser Ansatz erzeugt jedoch Leerraum am unteren Bildschirmrand, da die verschachtelte Spalte (mit der blauen Zeile) innerhalb der übergeordneten Spalte erweitert wird.

Lösung: Verwendung von „flex-grow-1“

Bootstrap 4.1 führte die Klasse flex-grow-1 ein, die dem Element eine intrinsische Größe von 0 zuweist und es dann vergrößert, um alle verbleibenden zu füllen Raum. In diesem Fall wenden wir es auf die Zeile an, die gedehnt werden muss.

Überarbeiteter Code

Hier ist der überarbeitete Codeausschnitt:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<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>

Erklärung

In der überarbeiteten Fassung Code:

• Die Höhe der übergeordneten Spalte (mit dem roten Hintergrund) wird mithilfe von h-100 auf 100 % festgelegt.
• Die verschachtelte Spalte wird in ein Div mit dem d- eingeschlossen. Flex-Flex-Spaltenklassen, die ihre untergeordneten Klassen in einer vertikalen Spalte anordnen und es ihnen ermöglichen, innerhalb der verfügbaren Höhe zu wachsen.
• Die zweite Zeile (mit dem blauen Hintergrund) hat jetzt die darauf angewendete Klasse „flex-grow-1“. Dadurch wird die Zeile angewiesen, die verbleibende Höhe in der übergeordneten Spalte zu erweitern und auszufüllen.

Dadurch wird die blaue Zeile nun erweitert, um den gesamten ungenutzten Platz in der roten Spalte einzunehmen, wodurch der gewünschte Effekt erzielt wird Füllen Sie die verbleibende Höhe aus.

Das obige ist der detaillierte Inhalt vonWie fülle ich die verbleibende Höhe mit einer Zeile in Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!