Comment remplir la hauteur restante d'une ligne Bootstrap 4 avec Flexbox ?

Comment remplir la hauteur restante d'une ligne Bootstrap 4

Agrandir une ligne pour occuper l'espace restant de l'écran peut être obtenu à l'aide de Bootstrap 4 . Pour ce faire, évitez d'ajouter h-100 à la classe de ligne pour éviter des espaces supplémentaires. Utilisez plutôt la classe flex-grow-1, comme illustré ci-dessous :

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

}

.container -fluide {

height: 100%;

}

.row {

justify-content-center;
height: 100%;

}

.col-4 {

background: rgb(196, 50, 53);

}

.col-8 {

background: rgb(74, 74, 74);

}

.bg-violet {

background: rgb(48, 0, 50);

}

.bg-blue {

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

}

Dans la colonne rouge , imbriquez une autre colonne avec une flexbox verticale en utilisant d-flex et flex-column. Une ligne se voit attribuer une hauteur fixe (par exemple, 150 px), tandis que l'autre se voit attribuer flex-grow-1, ce qui garantit qu'elle s'étend pour remplir l'espace restant. Enfin, incluez la classe text-white pour le texte blanc sur les arrière-plans colorés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!