Maison >interface Web >tutoriel CSS >Comment étendre une ligne Bootstrap à 4 lignes pour remplir la hauteur restante ?
Comment étendre une ligne Bootstrap à 4 lignes pour remplir la hauteur restante ?
- Patricia Arquetteoriginal
- 2024-11-17 05:23:03538parcourir
Bootstrap 4 - Extension d'une ligne pour remplir la hauteur restante
Dans cet article, nous explorerons comment étendre une ligne pour remplir la hauteur restante en utilisant Bootstrap 4.
Problème :
Vous pouvez rencontrer une situation dans laquelle vous souhaitez qu'une rangée s'étire pour occuper le reste de la hauteur disponible. Malgré les tentatives d'utilisation de la classe h-100, des espaces excessifs apparaissent en bas de l'écran.
Solution : Bootstrap 4.1 flex-grow-1 Class
Bootstrap 4.1 introduit la classe flex-grow-1, qui permet à un élément de se développer pour remplir l'espace restant dans son conteneur parent. En utilisant cette classe, nous pouvons obtenir le résultat souhaité.
Voici l'extrait de code révisé :
<br>html,body{height:100%;}</p> <p>.bg-violet {<br> fond : rgb(48,0,50);<br>}<br>.bg-gris {<br> fond : rgb(74,74,74);<br>}<br>.bg-bleu {<br> fond : rgb(50 101 196);<br>}<br>.bg-red {<br> fond : rgb(196,50,53);<br>} </p>
<p><div> <div class="row justifier-content-center h-100"></p>
<pre class="brush:php;toolbar:false"><div>
Explication :
- Conteneur Flexbox : Nous avons ajouté les colonnes d-flex et flex classes dans la colonne rouge pour activer la fonctionnalité flexbox.
- Corrigé Row : Nous avons défini une hauteur fixe pour la rangée violette (ROW 1) pour l'empêcher de s'étendre.
- Flex-grow : Nous avons appliqué la classe flex-grow-1 à la rangée bleue (ROW 2), lui permettant de grandir et de remplir la hauteur restante.
Avec ces ajustements, la rangée bleue occupera désormais le reste de la ligne disponible espace dans la colonne rouge. Cette méthode garantit que toute la hauteur de la page est utilisée efficacement sans aucun espace supplémentaire en bas.
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!