Maison >interface Web >tutoriel CSS >Comment éliminer l'espacement vertical dans les colonnes Bootstrap 4 ?

Comment éliminer l'espacement vertical dans les colonnes Bootstrap 4 ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-10 12:30:02897parcourir

How to Eliminate Vertical Spacing in Bootstrap 4 Columns?

Élimination de l'espacement vertical dans les colonnes Bootstrap 4

Dans Bootstrap 4, les colonnes de hauteurs différentes ont tendance à s'aligner verticalement, ce qui entraîne un espace vide entre elles . Cela se produit parce que Bootstrap 4 utilise flexbox, ce qui oblige les colonnes à se conformer à la hauteur de la colonne la plus haute.

Pour contrer ce problème, vous pouvez utiliser des flotteurs, une solution de contournement similaire à Bootstrap 3. Voici une structure HTML mise à jour :

<div class="container">
  <div class="row d-lg-block">
    <div class="col-lg-9 float-left description">Description</div>
    <div class="col-lg-3 float-right sidebar">Sidebar</div>
    <div class="col-lg-9 float-left comments">Comments</div>
  </div>
</div>

Dans cet exemple, la classe "d-lg-block" définit "display:block" sur la ligne dans les grands écrans, permettant aux colonnes de flotter au lieu d'être fléchies. En utilisant des flotteurs, vous pouvez contrôler l'ordre des colonnes tout en évitant un espacement vertical excessif.

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!

Déclaration:
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