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

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 : L'établissement d'une hauteur fixe pour chaque élément du portefeuille garantit un empilement cohérent, éliminant les espaces.
2. Utilisez 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 des longueurs de contenu variables.
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 la grille à différents points d'arrêt.
4. Utilisez jQuery pour ajuster la hauteur des colonnes. Dynamiquement : jQuery peut être utilisé pour ajuster la hauteur des colonnes de manière dynamique, en garantissant qu'elles 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 :

<div class="row portfolio">
    <div class="col-...">
        ...
    </div>
    <div class="clear"></div>
</div>

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 aisée 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 courants, éliminant ainsi les espaces.

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!