Wie erweitere ich eine Bootstrap-4-Reihe, um die verbleibende Höhe auszufüllen?

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Nach dem Login kopieren