Comment remplir la hauteur restante avec une ligne dans Bootstrap 4 ?

Bootstrap 4 : Remplir la hauteur restante avec une ligne

Atteindre une ligne qui s'étend sur la hauteur disponible restante dans Bootstrap 4 peut être un défi, mais c'est possible. Explorons comment y parvenir à l'aide de la classe flex-grow-1.

Problème actuel et cause

Dans le code fourni, vous utilisez h-100 pour définissez la hauteur de la ligne et de la colonne imbriquée. Cependant, cette approche crée un espace blanc en bas de l'écran car la colonne imbriquée (avec la ligne bleue) se développe dans la colonne parent.

Solution : utiliser flex-grow-1

Bootstrap 4.1 a introduit la classe flex-grow-1, qui attribue une taille intrinsèque de 0 à l'élément, puis l'agrandit pour remplir n'importe quel élément. espace restant. Dans ce cas, nous l'appliquerons à la ligne qui doit s'étirer.

Code révisé

Voici l'extrait de code révisé :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

Explication

Dans la version révisée code :

• La colonne parent (avec fond rouge) a sa hauteur définie à 100 % en utilisant h-100.
• La colonne imbriquée est enveloppée dans un div avec le d- classes flex flex-column, qui organise ses enfants en colonne verticale et leur permet de grandir dans la hauteur disponible.
• La deuxième rangée (avec le fond bleu) maintenant la classe flex-grow-1 lui est appliquée. Cela demande à la ligne de s'étendre et de remplir toute hauteur restante dans sa colonne parent.

En conséquence, la ligne bleue s'étend désormais pour occuper tout l'espace inutilisé dans la colonne rouge, obtenant ainsi l'effet souhaité de remplir la hauteur restante.

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!