Wie behebe ich Lücken in gestapelten Bootstrap-Zeilen?

Lücke in gestapelten Bootstrap-Zeilen?

Beim Erstellen eines Bootstrap-Rasters, das von größeren zu kleineren Bildschirmgrößen gestapelt wird, kommt es häufig zu Lücken Artikel mit langem Inhalt stören die Stapelreihenfolge. Hier sind mehrere Lösungen, um dieses Problem zu beheben:

1. Elementhöhen festlegen:
Weisen Sie allen Elementen in Ihrem Portfolio-Raster eine feste Höhe zu.

2. Verwenden Sie Masonry:
Verwenden Sie eine Bibliothek wie masonry.js, die die Elementgrößen dynamisch anpasst, um sie an den verfügbaren Platz anzupassen.

3. Responsive Klasse und Clearfix:
Wie in der Dokumentation von Bootstrap unter „Responsive Column Resets“ beschrieben, verwenden Sie responsive Klassen und fügen Sie nach jedem Element im Raster ein Div mit der Klasse „clearfix“ hinzu, um Lücken zu vermeiden.

4. jQuery-Höhenanpassung:
Verwenden Sie jQuery, um die Höhe von Spalten dynamisch basierend auf der maximalen Höhe innerhalb des Rasters anzupassen.

Beispiel für die Verwendung des Responsive Class- und Clearfix-Ansatzes:

Fügen Sie zu jedem Element im eine „clear“-Klasse hinzu Raster:

`<div>

<div>

`

CSS hinzufügen, um verschiedene Haltepunkte zu verarbeiten:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
        content: '';
        display: table;
        clear: both;
    }
}

Das obige ist der detaillierte Inhalt vonWie behebe ich Lücken in gestapelten Bootstrap-Zeilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!