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

Élimination de l'espace vertical entre les colonnes dans Bootstrap 4

Énoncé du problème :

Dans Bootstrap 4 , lors de l'utilisation d'une présentation à deux colonnes, un espace vertical vide apparaît entre les colonnes lorsque la fenêtre n'est pas en mode "mobile". mode".

Cause :

Bootstrap 4 utilise flexbox, qui aligne la hauteur de toutes les colonnes pour qu'elle corresponde à la plus haute.

Solution proposée : utiliser des flotteurs

Pour éviter l'espace vide, pensez à utiliser des flotteurs à la place :

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

Explication :

• La classe d-lg-block définit la propriété d'affichage de la ligne à bloquer sur les grandes fenêtres, permettant au colonnes à flotter.

Supplémentaires Remarques :

• L'imbrication des colonnes (
  ) n'obtiendra pas l'ordre des colonnes souhaité dans ce cas.
• Pour référence, la rubrique connexe « Bootstrap avec un ordre différent sur la version mobile" aborde un problème similaire.

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!