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

Lücken in den gestapelten Zeilen von Bootstrap schließen

Beim Erstellen eines Bootstrap-Rasters für eine Portfolio-Seite kann es zu einem Problem kommen, bei dem längere Kacheln beim Stapeln eine Lücke im Layout verursachen auftritt. Dieses Problem entsteht aufgrund der unterschiedlichen Höhen der Elemente innerhalb des Rasters. Um dieses Problem zu lösen, gibt es mehrere Lösungen:

1. Legen Sie eine Höhe für alle Portfolio-Elemente fest: Durch die Festlegung einer festen Höhe für jedes Portfolio-Element wird eine konsistente Stapelung sichergestellt und Lücken vermieden.
2. Verwenden Sie Masonry für die dynamische Anpassung: Masonry ist ein Layout-Tool, das Elemente dynamisch an den verfügbaren Platz anordnet und so Lücken auch bei unterschiedlichen Inhaltslängen beseitigt.
3. Verwenden Sie Responsive Classes und Clearfix: Wie in der Bootstrap-Dokumentation unter „Responsive Column Resets“ definiert, umfasst dieser Ansatz die Verwendung von responsiven Klassen und Clearfix, um Probleme bei der Rasterausrichtung an verschiedenen Haltepunkten zu beheben.
4. Verwenden Sie jQuery, um Spaltenhöhen anzupassen Dynamisch: jQuery kann verwendet werden, um die Höhen von Spalten dynamisch anzupassen und sicherzustellen, dass sie unabhängig von der Inhaltslänge richtig ausgerichtet sind.

Hier ist eine spezielle Technik zur Lösung des Problems:

Fügen Sie nach jedem Rasterelement ein Clearfix-Div hinzu:

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

Wenden Sie eine Medienabfrage auf das Clearfix-Div an, um den Float zu löschen:

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

Dieser Ansatz bietet:

• Lesbares und wartbares Markup:Der HTML-Code bleibt einfach und ermöglicht eine einfache Verwaltung von Portfolioelementen.
• Ausrichtung über verschiedene Bildschirmgrößen hinweg: Das CSS stellt sicher, dass Elemente an allen gängigen Haltepunkten ausgerichtet werden, wodurch Lücken vermieden werden.

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