Wie behebt man Probleme mit der vertikalen Spaltenausrichtung bei der Migration von Bootstrap 3 zu Bootstrap 4?

Bootstrap 3 zu Bootstrap 4: Vertikale Spaltenausrichtung behoben

Beim Übergang von Bootstrap 3 zu 4 kann es zu einem Problem mit der vertikalen Ausrichtung kommen Deine Kolumnen. Dies liegt daran, dass Bootstrap 4 eine strukturelle Änderung bei der Behandlung verschachtelter Spalten eingeführt hat.

Um dieses Problem zu beheben und die horizontale Spaltenausrichtung wiederherzustellen, ist es wichtig, die Klasse col-12 zu entfernen, die Ihre verschachtelten Spalten umgibt. Bootstrap 4 erfordert eine neue Zeile zum Verschachteln, wie in der Dokumentation erläutert:

"Wenn Sie .col-xs-* in Bootstrap 3 verwendet haben, achten Sie darauf, .row in Bootstrap 4 als Verschachtelungsspalten ohne a zu verwenden Zeile wird Probleme verursachen.“

Überarbeitet Code:

<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>

Zusätzlich kann dies mit JavaScript Fiddle überprüft werden:

https://jsfiddle.net/aq9Laaew/4791/

Das obige ist der detaillierte Inhalt vonWie behebt man Probleme mit der vertikalen Spaltenausrichtung bei der Migration von Bootstrap 3 zu Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!