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

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!