Maison > interface Web > tutoriel CSS > Comment créer une hauteur restante de remplissage Bootstrap à 4 rangées ?

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

Linda Hamilton
Libérer: 2024-11-16 08:00:03
original
607 Les gens l'ont consulté

How to Make a Bootstrap 4 Row Fill Remaining Height?

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

1

2

3

4

5

6

7

<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>

Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal