Comment faire en sorte qu'un Bootstrap à 4 rangées occupe la hauteur restante ?

Comment créer une hauteur restante de remplissage de ligne dans Bootstrap 4

Question

Dans Bootstrap 4, comment pouvez-vous étirer une ligne pour occuper la hauteur disponible restante ? L'ajout de h-100 à la classe de lignes laisse un espace blanc en bas de l'écran.

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">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

Solution

Pour remplir l'espace restant dans le colonne rouge avec la ligne bleue, utilisez la classe Bootstrap 4.1 flex-grow-1.

...
<div class="row justify-content-center bg-blue flex-grow-1">
  <div class="text-white">ROW 2 - grow remaining height</div>
</div>
...

Révisé 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>

Exemple

[Voir la démo en direct](https://codeply.com/go/Iyjsd8djnz)

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!