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

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>

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

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

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:

  

    ...
  
  

    ...
    <div class="clearfix visible-sm"></div>
  
  

    ...
  
  

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

    ...
  

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!