Heim > Artikel > Web-Frontend > Wie behebe ich Lücken in gestapelten Bootstrap-Zeilen?

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

Barbara StreisandOriginal: 2024-11-06 06:17:02989Durchsuche

How to Fix Gaps in Bootstrap Stacked Rows?

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!

jquery css bootstrap using class JS this column issue

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

Vorheriger Artikel：Wie kann sichergestellt werden, dass ausgewählte Felder beim Senden mit Formularen deaktiviert sind?Nächster Artikel：Wie kann sichergestellt werden, dass ausgewählte Felder beim Senden mit Formularen deaktiviert sind?

In Verbindung stehende Artikel

Mehr sehen