Wie kann man Lücken in überfüllten Bootstrap-Zeilen beheben?

Lücken in überfüllten Bootstrap-Zeilen reduzieren

Problemanalyse:

Beim Entwerfen eines Bootstrap-Rastersystems für ein Portfolio Benutzer Es kann vorkommen, dass unterschiedliche Inhaltslängen Lücken im Rasterlayout verursachen. Dies tritt auf, wenn die Höhe eines Elements im Raster seinen Stapelhaltepunkt überschreitet.

Lösungserkundung:

Um diese Herausforderung zu bewältigen, ziehen Sie die folgenden Lösungen in Betracht:

1. Feste Höhe: Weisen Sie allen Portfolioelementen eine einheitliche Höhe zu.
2. Mauerwerkslayout: Verwenden Sie eine dynamische Anpassungstechnik, um Elemente in die verfügbaren Elemente einzupassen Leerzeichen.
3. Responsive Klassen mit Clearfix: Nutzen Sie die reaktionsfähigen Klassen von Bootstrap zusammen mit Medienabfragen, um Floats nach einer bestimmten Anzahl von Elementen in jeder Zeile zu löschen.
4. jQuery Höhenanpassung: Spaltenhöhen mithilfe von jQuery dynamisch anpassen, um sicherzustellen, dass sie der maximalen Höhe entsprechen.

Erweiterte Ansätze:

Mini Clearfix:

Anstatt nach jedem Element separate Clear-Elemente zu verwenden, sollten Sie erwägen, nach jedem Rasterelement ein zusätzliches Div hinzuzufügen und mithilfe von Medienabfragen einen Mini-Clearfix darauf anzuwenden. Dieser Ansatz vermeidet zusätzliches JavaScript und behält die Lesbarkeit des Markups bei.

<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;
    }
}
...

jQuery-Höhenanpassung:

Für einen dynamischeren Ansatz sollten Sie die Verwendung von jQuery zum Anpassen der Spalte in Betracht ziehen Höhen entsprechend der maximalen Höhe:

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);
    });
});

Das obige ist der detaillierte Inhalt vonWie kann man Lücken in überfüllten Bootstrap-Zeilen beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!