Maison > Article > interface Web > Comment corriger les lacunes dans les lignes empilées Bootstrap ?

Comment corriger les lacunes dans les lignes empilées Bootstrap ?

Barbara Streisandoriginal: 2024-11-06 06:17:02989parcourir

How to Fix Gaps in Bootstrap Stacked Rows?

Espace dans les lignes empilées Bootstrap ?

Lors de la création d'une grille Bootstrap qui s'empile de tailles d'écran plus grandes à plus petites, il est courant de rencontrer des espaces lorsque les éléments avec un contenu long perturbent l'ordre d'empilement. Voici plusieurs solutions pour résoudre ce problème :

1. Définir les hauteurs des éléments :
Attribuez une hauteur fixe à tous les éléments de votre grille de portfolio.

2. Utilisez Masonry :
Employez une bibliothèque comme masonry.js qui ajuste dynamiquement la taille des éléments pour les adapter aux espaces disponibles.

3. Classe réactive et Clearfix :
Comme décrit dans la documentation de Bootstrap sous « Réinitialisations de colonnes réactives », utilisez des classes réactives et ajoutez un div avec la classe « clearfix » après chaque élément de la grille pour éviter les lacunes.

4. Ajustement de la hauteur jQuery :
Utilisez jQuery pour ajuster la hauteur des colonnes de manière dynamique en fonction de la hauteur maximale dans la grille.

Exemple d'utilisation de la classe réactive et de l'approche Clearfix :

Ajoutez une classe "clear" à chaque élément de la grille :

`<div>

<div>

Ajoutez du CSS à gérer différents points d'arrêt :

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
        content: '';
        display: table;
        clear: both;
    }
}

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!

jquery css bootstrap using class JS this column issue

Déclaration：

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

Article précédent：Comment garantir que les champs de sélection désactivés sont soumis avec les formulaires ?Article suivant：Comment garantir que les champs de sélection désactivés sont soumis avec les formulaires ?

Articles Liés

Voir plus