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

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