Wie erreicht man eine optimale Stapelung von Divs unterschiedlicher Größe in Bootstrap ohne Zeilen?

Bootstrap: Optimales Stapeln von Divs unterschiedlicher Größe erreichen

Das bereitgestellte Layout umfasst mehrere Divs unterschiedlicher Höhe, die kompakt gestapelt werden müssen Benehmen. Das Zeilensystem von Bootstrap ist zwar praktisch, behindert jedoch in diesem Szenario ein optimales Stapeln. Daher wird nach einer reinen CSS-Lösung gesucht, um diese Einschränkung zu überwinden.

LÖSUNG

Anstatt das Zeilensystem von Bootstrap zu verwenden, sollten Sie die Nutzung von „.visible-sm, .visible“ in Betracht ziehen -md, .visible-lg“-Klassen in Verbindung mit der „clearfix“-Klasse. Diese Strategie löscht Floats effektiv je nach Bildschirmgröße.

Implementierung:

<!-- Clear floats in medium and large screens -->
<div class="clearfix visible-md visible-lg"></div>

<!-- Clear floats in small screens -->
<div class="clearfix visible-sm"></div>

Als Referenz siehe Bootstrap 3-Dokumentation.

Dieser Ansatz Stellt sicher, dass die Divs ordnungsgemäß gestapelt werden, und optimiert so das Gesamterscheinungsbild und die Funktionalität des Layouts über verschiedene Bildschirmauflösungen hinweg.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine optimale Stapelung von Divs unterschiedlicher Größe in Bootstrap ohne Zeilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!