Comment éviter les espaces verticaux vides entre les colonnes dans Bootstrap 4 ?

Espace vertical vide entre les colonnes dans Bootstrap 4

Bootstrap 4 introduit flexbox, ce qui donne aux colonnes partageant la même hauteur que la colonne la plus haute. Cela crée un espace vide indésirable entre les colonnes dans certains scénarios.

Alignement Flexbox et espace vide

Considérez ceci :

• Colonne A : Description (Grande)
• Colonne B : Barre latérale (Courte)
• Colonne C : Commentaires (Grande)

Flexbox aligne les colonnes verticalement, ce qui donne :

------------------  ---------
|                  ||         |
|                  ||         |
------------------ |         |
------------------ |         |
|                  ||         |
------------------  ---------

Mais nous souhaitons :

------------------  ---------
|                  |
 ------------------  
|                  |
 ------------------ |         |
|                  ||         |
 -------------------  ---------

Flotteurs comme solution de contournement

Bootstrap 3 a utilisé des flotteurs, ce qui permet aux colonnes de flotter et d'occuper uniquement le l'espace dont ils ont besoin. Pour y parvenir dans Bootstrap 4 :

<div>

La classe d-lg-block force display:block sur la ligne, permettant aux colonnes de flotter sur de grands écrans.

Imbrication et Préservation de l'ordre

L'imbrication des colonnes comme suit peut sembler une solution :

<div>

Cependant, cela compromet l'ordre des colonnes. Dans l'exemple ci-dessus, la barre latérale apparaîtra en dernier sur les petits écrans en raison de la disposition automatique des lignes imbriquées.

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!