Wie fülle ich die verbleibende Höhe einer Bootstrap-4-Reihe mit Flexbox?

So füllen Sie die verbleibende Höhe einer Bootstrap 4-Reihe aus

Das Vergrößern einer Zeile, um den verbleibenden Platz auf dem Bildschirm einzunehmen, kann mit Bootstrap 4 erreicht werden Um dies zu erreichen, vermeiden Sie das Hinzufügen von h-100 zur Zeilenklasse, um zusätzliche Leerzeichen zu vermeiden. Verwenden Sie stattdessen die Klasse „flex-grow-1“, wie unten dargestellt:

<br>html, body {<pre class="brush:php;toolbar:false">height: 100%;

}

.container -flüssig {

height: 100%;

}

.row {

justify-content-center;
height: 100%;

}

.col-4 {

background: rgb(196, 50, 53);

}

.col-8 {

background: rgb(74, 74, 74);

}

.bg-purple {

background: rgb(48, 0, 50);

}

.bg-blue {

background: rgb(50, 101, 196);
flex-grow: 1;

}

Innerhalb der roten Spalte Verschachteln Sie eine weitere Spalte mit einer vertikalen Flexbox mithilfe von d-flex und flex-column. Einer Zeile wird eine feste Höhe zugewiesen (z. B. 150 Pixel), während der anderen Zeile „flex-grow-1“ zugewiesen wird, wodurch sichergestellt wird, dass sie sich ausdehnt, um den verbleibenden Platz auszufüllen. Fügen Sie abschließend die Klasse text-white für weißen Text auf den bunten Hintergründen hinzu.

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