Heim > Artikel > Web-Frontend > Wie erweitere ich eine Bootstrap-4-Reihe, um die verbleibende Höhe auszufüllen?
Wie erweitere ich eine Bootstrap-4-Reihe, um die verbleibende Höhe auszufüllen?
- Patricia ArquetteOriginal
- 2024-11-17 05:23:03473Durchsuche
Bootstrap 4 – Zeile erweitern, um die verbleibende Höhe auszufüllen
In diesem Artikel erfahren Sie, wie Sie eine Zeile erweitern, um die verbleibende Höhe auszufüllen mit Bootstrap 4.
Problem:
Möglicherweise Es kommt zu einer Situation, in der Sie möchten, dass eine Reihe gedehnt wird, um den Rest der verfügbaren Höhe einzunehmen. Trotz Versuchen, die h-100-Klasse zu verwenden, erscheint am unteren Bildschirmrand übermäßig viel Leerraum.
Lösung: Bootstrap 4.1 flex-grow-1-Klasse
Bootstrap 4.1 führt die Klasse „flex-grow-1“ ein, die es einem Element ermöglicht, sich zu erweitern, um den verbleibenden Platz in seinem übergeordneten Container zu füllen. Durch die Verwendung dieser Klasse können wir unser gewünschtes Ergebnis erzielen.
Hier ist das überarbeitete Code-Snippet:
<br>html,body{height:100%;}</p> <p>.bg-purple {<br>Hintergrund: rgb(48,0,50);<br>}<br>.bg-gray {<br> Hintergrund: rgb(74,74,74);<br>}<br>.bg-blue {<br> Hintergrund: rgb(50,101,196);<br>}<br>.bg-red {<br> Hintergrund: rgb(196,50,53);<br>} </p>
<p><div> <div class="row justify-content-center h-100"></p>
<pre class="brush:php;toolbar:false"><div>Erklärung:
- Flexbox-Container: Wir haben d-flex und flex-column hinzugefügt Klassen in die rote Spalte einfügen, um die Flexbox-Funktionalität zu aktivieren.
- Behoben Zeile: Wir legen eine feste Höhe für die violette Zeile (REIHE 1) fest, um zu verhindern, dass sie sich ausdehnt.
- Flex-grow: Wir haben die Klasse „flex-grow-1“ angewendet auf die blaue Reihe (REIHE 2), sodass sie wachsen und die verbleibende Höhe ausfüllen kann.
Mit diesen Anpassungen nimmt die blaue Reihe nun den Rest ein verfügbaren Platz innerhalb der roten Spalte. Diese Methode stellt sicher, dass die gesamte Seitenhöhe effizient genutzt wird, ohne dass unten zusätzlicher Leerraum entsteht.
Das obige ist der detaillierte Inhalt vonWie erweitere ich eine Bootstrap-4-Reihe, um die verbleibende Höhe auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!