Résoudre les lacunes dans les lignes empilées de Bootstrap

Lors de la construction d'une grille Bootstrap pour une page de portfolio, vous pouvez rencontrer un problème où des vignettes plus longues provoquent un espace dans la mise en page lors de l'empilement se produit. Ce problème se pose en raison des différentes hauteurs des éléments au sein de la grille. Pour résoudre ce problème, plusieurs solutions existent :

1. Définir une hauteur pour tous les éléments du portefeuille : Établir une hauteur fixe pour chaque élément du portefeuille garantit un empilement cohérent, éliminant les espaces.
2. Utiliser la maçonnerie pour un ajustement dynamique : La maçonnerie est un outil de mise en page qui organise dynamiquement les éléments pour s'adapter à l'espace disponible, éliminant les espaces même avec un contenu variable. longueurs.
3. Employer des classes réactives et Clearfix : Comme défini dans la documentation Bootstrap sous « Réinitialisations de colonnes réactives », cette approche implique l'utilisation de classes réactives et de clearfix pour résoudre les problèmes d'alignement de grille à différents points d'arrêt.
4. Utiliser jQuery pour ajuster dynamiquement la hauteur des colonnes : jQuery peut être utilisé pour ajuster la hauteur des colonnes de manière dynamique, garantissant ainsi qu'ils s'alignent correctement quelle que soit la longueur du contenu.

Voici une technique spécifique pour résoudre le problème :

Ajoutez un div clearfix après chaque élément de la grille :

    

        ...
    
    

Appliquez une requête multimédia au div clearfix pour effacer le flottant :

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        clear: both;
    }
}

Cette approche fournit :

• Marquage lisible et maintenable : Le HTML reste simple, permettant une gestion facile des éléments du portefeuille.
• Alignement sur différentes tailles d'écran : Le CSS garantit que les éléments sont alignés à tous les points d'arrêt communs, éliminant ainsi les espaces.