Wie behebe ich horizontale Ausrichtungsprobleme im Fluid Grid von Bootstrap 3?

Layout-Probleme im Fluid Grid von Bootstrap 3

Beim Versuch, mit Bootstrap 3 ein Fluid-Grid-Layout zu erstellen, können Benutzer auf Ausrichtungsprobleme stoßen Kästchen innerhalb des Rasters werden nicht horizontal ausgerichtet, wenn ein Kästchen über die Höhe der anderen hinausragt. Diese Fehlausrichtung entsteht durch unterschiedliche Inhaltshöhen in den Spalten.

Um dieses Dilemma zu lösen, sind drei primäre Ansätze möglich:

1. Nur-CSS-Lösung über CSS3-Spaltenbreite

2. Clearfix-Ansatz

3. Isotope/Masonry Plugin

Update für 2017 und darüber hinaus

Flexbox (Bootstrap 4 und Später)

Eine zeitgemäße Lösung für das Problem der Höhendiskrepanz besteht darin, mithilfe der Flexbox, die standardmäßig in Bootstrap 4 vorhanden ist, zu erzwingen, dass Spalten die gleiche Höhe haben.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Zusätzliche Ressourcen

Besuchen Sie die bereitgestellten Links für Live-Demonstrationen der Lösungen und weitere Informationen dazu Thema.

Das obige ist der detaillierte Inhalt vonWie behebe ich horizontale Ausrichtungsprobleme im Fluid Grid von Bootstrap 3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!