Warum sind meine Bootstrap 4-Spalten vertikal statt horizontal ausgerichtet?

Inkonsistenzen bei der Spaltenausrichtung von Bootstrap 4

Beim Übergang von Bootstrap 3 zu 4 haben Sie festgestellt, dass Ihre Spalten statt vertikal ausgerichtet sind horizontal. Dies kann auf eine Änderung im Rastersystem in Bootstrap 4 zurückgeführt werden.

Col-12-Problem

In Bootstrap 3 konnten Sie Spalten innerhalb einer übergeordneten Zeile mit umbrechen die Klasse „col-12“. Dies ist in Bootstrap 4 nicht mehr gültig. Jede Verschachtelungsebene verfügt über eine eigene Zeile. Entfernen Sie daher die Klasse „col-12“ aus der übergeordneten Zeile:

<div class="row">
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
</div>

Dadurch wird sichergestellt, dass die Spalten horizontal ausgerichtet sind und ihr erwartetes Verhalten beibehalten. Weitere Informationen zum Verschachteln in Bootstrap finden Sie in der offiziellen Dokumentation: https://getbootstrap.com/docs/4.0/layout/grid/#nesting

Das obige ist der detaillierte Inhalt vonWarum sind meine Bootstrap 4-Spalten vertikal statt horizontal ausgerichtet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!