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

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

Mary-Kate Olsen
Libérer: 2024-11-10 18:17:02
original
289 Les gens l'ont consulté

How to Eliminate Vertical Space Between Columns in 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>
Copier après la connexion

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!

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