Comment combler les lacunes dans les lignes d'amorçage trop remplies ?

Réduire les écarts dans les lignes Bootstrap trop remplies

Analyse du problème :

Lors de la conception d'un système de grille Bootstrap pour un portefeuille, les utilisateurs peut rencontrer des situations dans lesquelles des longueurs de contenu variables entraînent des lacunes dans la disposition de la grille. Cela se produit lorsqu'un élément de la grille a une hauteur qui dépasse son point d'arrêt d'empilement.

Exploration de solutions :

Pour relever ce défi, envisagez les solutions suivantes :

1. Hauteur fixe : Attribuez une hauteur uniforme à tous les éléments du portefeuille.
2. Disposition en maçonnerie : Utilisez une technique d'ajustement dynamique pour adapter les éléments aux space.
3. Classes réactives avec Clearfix : Utilisez les classes réactives de Bootstrap ainsi que les requêtes multimédias pour effacer les flottants après un nombre spécifié d'éléments dans chaque ligne.
4. jQuery Réglage de la hauteur : Ajustez dynamiquement la hauteur des colonnes à l'aide de jQuery pour vous assurer qu'elles correspondent à la hauteur maximale.

Approches avancées :

Mini Clearfix :

Au lieu d'utiliser des éléments clear séparés après chaque élément, pensez à ajouter un div supplémentaire après chaque élément de grille et à lui appliquer un mini clearfix à l'aide de requêtes multimédias. Cette approche évite le JavaScript supplémentaire et maintient la lisibilité du balisage.

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

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

Ajustement de la hauteur jQuery :

Pour une approche plus dynamique, envisagez d'utiliser jQuery pour ajuster la colonne hauteurs correspondant à la hauteur maximale :

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

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!