Heim  >  Artikel  >  Web-Frontend  >  Wie kann man Lücken in überfüllten Bootstrap-Zeilen beheben?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-06 13:51:02448Durchsuche

How to Fix Gaps in Overfilled Bootstrap Rows?

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^=&quot;col-&quot;]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^=&quot;col-&quot;]'), 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn