Wie stapele ich Divs unterschiedlicher Höhe in Bootstrap mithilfe von CSS?

Stapeln von Divs unterschiedlicher Höhe in Bootstrap mit CSS

In diesem Szenario stellt das Zeilensystem von Bootstrap eine Herausforderung dar, Kategorien von optimal anzuzeigen unterschiedliche Höhen. Um dieses Problem ohne Verwendung des Masonry-Plugins zu beheben, ziehen Sie die folgende CSS-Lösung in Betracht:

1. Verwenden Sie sichtbare Klassen für reaktionsfähiges Stapeln:
   Verwenden Sie .visible-sm , .visible-md und .visible-lg Klassen in Verbindung mit Clearfix. Dadurch wird sichergestellt, dass Floats je nach Bildschirmgröße entsprechend gelöscht werden.

   <div class="clearfix visible-md visible-lg"></div>
   <div class="clearfix visible-sm"></div>

2. Beispielimplementierung:
   Unten finden Sie eine vereinfachte Demonstration für zwei Kategorien mit unterschiedlichen Höhen :

   <div class="row">
       <div class="col-md-6">
           <div class="category-div">

3. Zusätzliche Hinweise:

   • .visible-sm löscht Floats für kleine Bildschirme (<=768px)
   • .visible-md löscht Floats für mittlere Bildschirme (>768px)
   • .visible-lg löscht Floats für große Bildschirme (>1200px)
   • Passen Sie den Stil an=" Höhe: ...;" Attribut passend zu den Div-Höhen Ihrer spezifischen Kategorie
   • Stellen Sie sicher, dass die Clearfix-Klasse außerhalb der Spalten angewendet wird, um die Floats effektiv zu löschen

Durch die Implementierung dieser Technik Sie können innerhalb des Rastersystems von Bootstrap eine reaktionsfähige Stapelung von div-Elementen mit unterschiedlichen Höhen erreichen. Dieser Ansatz bietet eine reine CSS-Lösung, die mit Bootstrap kompatibel ist und den Bedarf an optimaler Layout-Visualisierung erfüllt.

Das obige ist der detaillierte Inhalt vonWie stapele ich Divs unterschiedlicher Höhe in Bootstrap mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!