Wie behebe ich falsch ausgerichtete Boxen in einem Bootstrap 3 Fluid Grid-Layout?

Fehlerbehebung bei Problemen mit dem Bootstrap 3 Fluid Grid-Layout

Sind Sie auf eine Fehlausrichtung innerhalb eines Bootstrap 3 Fluid Grid-Layouts gestoßen? Wenn Kartons nicht in einer Reihe ausgerichtet werden, kann dies ein frustrierendes Problem sein. Die Ursache liegt in der unterschiedlichen Höhe des Kartoninhalts. Hier sind wirksame Methoden, um dieses Problem zu lösen:

1. CSS-Ansatz (CSS3-Spaltenbreite)

Implementieren Sie den folgenden Ansatz mit CSS3-Spaltenbreite: [Bootply-Demo](http://bootply.com/85737)

2 . „Clearfix“-Ansatz (Responsive Resets)

Verwenden Sie den von Bootstrap empfohlenen „Clearfix“-Ansatz: [Bootply-Demo](http://bootply.com/89910)

3. Isotope/Masonry-Plugin

Als alternative Lösung sollten Sie die Verwendung des Isotope/Masonry-Plugins in Betracht ziehen: [Bootply Demo](http://bootply.com/61482)

Update 2017: Flexbox-Lösung

In Bootstrap 4 bietet Flexbox eine optimale Lösung:

CSS:

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

Demo: [Flexbox Equal Height](https://codepen.io/anon/pen/EbpvGe)

Zusätzliche Ressourcen für Bootstrap-Spalten mit variabler Höhe:

• [Bootstrap-Variable Höhenspalten](https://getbootstrap.com/docs/4.0/layout/grid/#equal-width)

Das obige ist der detaillierte Inhalt vonWie behebe ich falsch ausgerichtete Boxen in einem Bootstrap 3 Fluid Grid-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!