Maison > interface Web > tutoriel CSS > le corps du texte

Comment éliminer les lacunes dans les lignes empilées Bootstrap : un guide complet

Patricia Arquette
Libérer: 2024-11-11 11:35:03
original
172 Les gens l'ont consulté

How to Eliminate Gaps in Bootstrap Stacked Rows: A Comprehensive Guide

Espace dans les lignes empilées Bootstrap : solutions complètes

La présence d'espaces dans les lignes empilées Bootstrap peut être un problème frustrant pour les développeurs. Pour répondre à ce souci, il existe plusieurs solutions efficaces.

1. Définir la normalisation de la hauteur des éléments :

L'attribution d'une hauteur fixe à tous les éléments du portefeuille garantit une répartition égale du contenu. Cela élimine la possibilité de variations de taille d'éléments provoquant des espaces.

2. Utiliser la grille dynamique de maçonnerie :

La maçonnerie est un outil qui ajuste automatiquement le placement des éléments pour s'adapter à l'espace disponible. Il offre une solution dynamique qui organise dynamiquement les éléments en fonction de leur contenu.

3. Tirez parti des classes réactives Bootstrap :

Bootstrap fournit des classes réactives qui permettent la création de points d'arrêt pour différentes tailles d'écran. L'utilisation de ces classes et de clearfix comme indiqué dans la documentation Bootstrap peut combler efficacement les lacunes.

4. Ajuster dynamiquement les hauteurs de colonnes avec jQuery :

Ajuster dynamiquement les hauteurs de colonnes à l'aide de jQuery est une autre option. En calculant la hauteur maximale entre les éléments et en l'appliquant à toutes les colonnes, un espacement cohérent peut être obtenu.

Approche alternative : Mini Clearfix avec requêtes multimédias

Pour les cas où le contenu est généré dynamiquement, une astuce utilisant un mini clearfix et des requêtes multimédias peut être appliquée. En ajoutant un div après chaque élément de la grille et en lui appliquant un clearfix basé sur les points d'arrêt, les lacunes peuvent être évitées avec élégance.

CSS :

@media (max-width: 767px) {
    .portfolio > .clear:nth-child(6n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
Copier après la connexion

Cette solution élimine le besoin de JavaScript et garantit la lisibilité du balisage.

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