Auflösen von Lücken in gestapelten Zeilen von Bootstrap

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 so anordnet, dass sie in den verfügbaren Raum passen, und Lücken auch bei variierenden Inhalten beseitigt Längen.
3. Verwenden Sie reaktionsfähige Klassen und Clearfix: Wie in der Bootstrap-Dokumentation unter „Responsive Column Resets“ definiert, umfasst dieser Ansatz die Verwendung von reaktionsfähigen Klassen und Clearfix, um Probleme bei der Rasterausrichtung an verschiedenen Haltepunkten zu beheben.
4. Verwenden Sie jQuery, um Spaltenhöhen dynamisch anzupassen: jQuery kann verwendet werden, um die anzupassen Höhen von Spalten dynamisch anpassen, um sicherzustellen, dass sie unabhängig von der Länge des Inhalts ordnungsgemäß ausgerichtet werden.

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

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

    

        ...
    
    

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 eliminiert wird Lücken.