Wie stapele ich Bootstrap-Divs unterschiedlicher Höhe mit CSS?

Stapeln von Divs unterschiedlicher Höhe in Bootstrap mit CSS

Im gegebenen Layout bleibt die vertikale Ausrichtung dieser Divs aufgrund des Rastersystems von Bootstrap eine Herausforderung . Dieses Problem kann durch CSS gelöst werden, ohne auf Plugins angewiesen zu sein.

.menu-category {
  float: left;
  clear: both;
  padding: 0;
}

Durch die Anwendung dieser Stile werden die Kategorien nebeneinander verschoben, und mit der Eigenschaft „clear“ werden die Floats nach jeder Kategorie gelöscht. Dies gewährleistet eine optimale Stapelung.

Um das Layout für verschiedene Bildschirmgrößen zu optimieren, verwenden Sie die Dienstprogrammklassen von Bootstrap:

.visible-sm, .visible-md, .visible-lg {
  display: block;
}

.visible-sm {
  clear: both;
}

Dieses CSS stellt sicher, dass die Kategorien auf kleineren Bildschirmen gestapelt werden (z. B. Smartphones) und löschen Sie den Float nach jeder Kategorie auf größeren Bildschirmen (z. B. Tablets und Desktops).

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