Comment éliminer l'espace vertical vide entre les colonnes dans Bootstrap 4 ?

Gestion de l'espace vertical vide entre les colonnes dans Bootstrap 4

Un problème courant lorsque l'on travaille avec des colonnes dans Bootstrap 4 est la présence d'un espace vertical vide entre elles, en particulier dans des fenêtres plus grandes. Cela peut se produire car Bootstrap 4 implémente une disposition flexbox, qui aligne les hauteurs des colonnes.

Comprendre le comportement

Dans une disposition flexbox, toutes les colonnes d'une ligne ont la même hauteur que la plus haute. colonne. Par exemple, si vous avez trois colonnes de hauteurs différentes, les deux colonnes les plus courtes s'étendront verticalement pour correspondre à la hauteur de la colonne la plus haute. En conséquence, l'espace vide apparaît.

Résolution : utilisation de flotteurs

Étant donné que l'imbrication des colonnes peut perturber l'ordre des colonnes souhaité, la solution dans Bootstrap 4 consiste à utiliser des flotteurs. Cela imite le comportement de Bootstrap 3, où les colonnes flotteraient les unes à côté des autres.

Pour supprimer l'espace vertical vide, vous pouvez utiliser le CSS suivant :

.container {
  .row {
    display: block !important;
    .col {
      float: left;
    }
  }
}

Ce code remplace le disposition flexbox par défaut et définit la propriété d'affichage de la ligne à bloquer. De plus, il définit la propriété float des colonnes à gauche, leur permettant de flotter les unes à côté des autres.

Exemple d'implémentation

Voici un exemple de structure HTML qui utilise des flotteurs pour éliminer l'espace vertical vide. :

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

En utilisant des flotteurs, vous pouvez empêcher l'espace vertical vide d'apparaître et maintenir l'ordre des colonnes souhaité même dans des fenêtres plus grandes.

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!