Comment créer une hauteur restante de remplissage Bootstrap à 4 rangées ?

Bootstrap 4 : remplir la hauteur restante dans les lignes

Dans Bootstrap 4, créer une ligne qui occupe entièrement l'espace vertical restant peut être un défi. Par défaut, l'ajout de la classe h-100 à la ligne ne fonctionnera pas comme prévu.

Solution : Flexbox

Pour étirer une ligne pour remplir la hauteur restante, utilisez la propriété flexbox Bootstrap 4.1 flex-grow-1. Cette classe permet à un élément de se développer pour remplir l'espace disponible restant dans son conteneur.

Implémentation

Voici comment implémenter la solution :

1. Ajouter une hauteur de conteneur : Définissez la hauteur de l'élément de conteneur (conteneur-fluide) sur 100 %.
2. Imbriquer une colonne dans une colonne flexbox : Enveloppez la colonne dans un div avec les classes d-flex et flex-column.
3. Appliquer flex -grow-1 : Ajoutez la classe flex-grow-1 à la ligne qui doit remplir le reste hauteur.

Exemple de code

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

Résultat :

La rangée bleue (ROW 2) sera développez maintenant pour remplir la hauteur restante de la colonne rouge.

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!