Wie stapele ich Divs vertikal mit unterschiedlichen Höhen in Bootstrap?

Flexibles vertikales Stapeln von Divs mit Bootstrap

Ihre Frage sucht nach einer CSS-basierten Lösung zum vertikalen Stapeln von Div-Elementen unterschiedlicher Höhe unter Verwendung des Bootstrap-Frameworks. Hier ist eine umfassende Antwort:

Das reaktionsfähige Rastersystem von Bootstrap priorisiert die horizontale Ausrichtung und den Inhaltsfluss. Um eine vertikale Stapelung unregelmäßig großer Divs zu erreichen, ist ein flexiblerer Ansatz erforderlich.

Erwägen Sie die Verwendung der Dienstprogrammklassen .visible-* in Verbindung mit .clearfix. Diese Klassen zeigen Inhalte abhängig von der Bildschirmgröße bedingt an oder verbergen sie.

Fügen Sie für jedes Div, das Sie vertikal stapeln möchten, den folgenden Code hinzu:

<div>

Diese Kombination von Klassen löscht effektiv die Floats für Verschiedene Bildschirmgrößen, um sicherzustellen, dass Divs ordnungsgemäß gestapelt werden, ohne sich zu überlappen. So funktioniert es:

• .visible-md .visible-lg verbirgt das Clearing-Div auf kleinen und extra kleinen Bildschirmen.
• .visible-sm verbirgt das Clearing-Div auf Medium, große und extra große Bildschirme.

Durch die Implementierung dieser Lösung können Sie eine optimale Stapelung Ihrer Divs erreichen und gleichzeitig die Kompatibilität mit Bootstrap beibehalten.

Das obige ist der detaillierte Inhalt vonWie stapele ich Divs vertikal mit unterschiedlichen Höhen in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!