Maison > interface Web > tutoriel CSS > Comment éviter les espaces verticaux vides entre les colonnes dans Bootstrap 4 ?

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

Susan Sarandon
Libérer: 2024-11-14 13:06:02
original
177 Les gens l'ont consulté

How to Avoid Empty Vertical Space Between Columns in 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 :

------------------  ---------
|                  ||         |
|                  ||         |
------------------ |         |
------------------ |         |
|                  ||         |
------------------  ---------
Copier après la connexion

Mais nous souhaitons :

------------------  ---------
|                  |
 ------------------  
|                  |
 ------------------ |         |
|                  ||         |
 -------------------  ---------
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

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!

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