Heim > Web-Frontend > CSS-Tutorial > Wie richtet man ungleichmäßige Höhenunterschiede in Bootstrap-Zeilen mithilfe von CSS-Clearfixes vertikal aus?

Wie richtet man ungleichmäßige Höhenunterschiede in Bootstrap-Zeilen mithilfe von CSS-Clearfixes vertikal aus?

Linda Hamilton
Freigeben: 2024-11-15 22:55:04
Original
727 Leute haben es durchsucht

How to Vertically Align Uneven Height Divs in Bootstrap Rows Using CSS Clearfixes?

Vertikale Ausrichtung von Divs mit ungleichmäßiger Höhe in Bootstrap mithilfe von CSS-Clearfixes

Das Ziel besteht darin, Divs unterschiedlicher Höhe innerhalb einer Bootstrap-Reihe ohne vertikal auszurichten Verwendung externer Plugins wie Masonry. Hier ist eine CSS-Lösung:

In der bereitgestellten HTML-Struktur wird jede Kategorie durch ein Div mit der Klasse „menu-category“ dargestellt. Diese Divs haben aufgrund der unterschiedlichen Elemente innerhalb der einzelnen Kategorien unterschiedliche Höhen. Um die gewünschte Stapelung zu erreichen, können wir die Sichtbarkeitsklassen von Bootstrap nutzen.

Konkret können wir eine „clearfix“-Klasse mit Sichtbarkeitsmodifikatoren hinzufügen, um die Floats im div-Layout selektiv zu löschen. Wenn Sie beispielsweise die Floats nur in mittleren und großen Bildschirmgrößen löschen möchten, können Sie den folgenden Code verwenden:

<div class="clearfix visible-md visible-lg"></div>
Nach dem Login kopieren

Ähnlich können Sie Folgendes verwenden, um Floats nur in kleinen Bildschirmgrößen zu löschen:

<div class="clearfix visible-sm"></div>
Nach dem Login kopieren

Indem Sie diese löschenden Divs an geeigneten Stellen in der HTML-Struktur hinzufügen, können Sie verhindern, dass die schwebenden Divs in die nächste Zeile umgebrochen werden, wodurch sie zum Stapeln gezwungen werden vertikal.

Beispiel:

Nach dem Login kopieren

Bei diesem Ansatz werden die Div-Höhen dynamisch basierend auf dem Inhalt angepasst, um sicherzustellen, dass sie sauber im Zeilencontainer gestapelt werden.

Das obige ist der detaillierte Inhalt vonWie richtet man ungleichmäßige Höhenunterschiede in Bootstrap-Zeilen mithilfe von CSS-Clearfixes vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage