Heim >Web-Frontend >CSS-Tutorial >Wie erreicht man benutzerdefinierte Spaltenversätze in Bootstrap 4 Beta?
Wie erreicht man benutzerdefinierte Spaltenversätze in Bootstrap 4 Beta?
- Barbara StreisandOriginal
- 2024-11-09 07:59:02670Durchsuche
Bootstrap-Spaltenversatz funktioniert nicht: Eine Lösung
In Bootstrap 4 Beta ist der Spaltenversatz offenbar zu einem Grund zur Sorge für Entwickler geworden. Die zuvor verwendeten offset-md-*-Klassen wurden gemäß der Dokumentation entfernt. Dieses Problem wurde jedoch in Beta 2 vorübergehend behoben, wodurch die bekannten Offset-Klassen wiederhergestellt wurden.
In Beta 1 wurde jedoch ein neuartiger Ansatz zum Spalten-Offset mit der .ml-auto Klasse. Während diese Methode tatsächlich eine col-md-4-Spalte verschieben kann, bewirkt sie einen Versatz von vier Spalten. Dies ist nicht das, was die meisten Entwickler suchen; Sie benötigen benutzerdefinierte Offsets wie das frühere
col-md-4 keine weiteren Spalten vorhanden sind, wird die gesamte rechte Seite der Zeile eingenommen.
Alternative Lösungen
Alternativ können Sie eine Dummy-Spalte implementieren, um einen Zwei-Spalten-Offset zu erreichen:<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
...
</div>
</div>Zum Zentrieren von zwei </p>
<p>col-md-4<strong>-Spalten die Kombination von </strong> ml-auto<strong> und </strong>mr-auto<strong> können verwendet werden:</strong></p>
<pre class="brush:php;toolbar:false"><div class="row">
<div class="col-md-4 ml-auto">
.
</div>
<div class="col-md-4 mr-auto">
.
</div>
</div>Um schließlich eine einzelne Spalte col-md-4 zu zentrieren, verwenden Sie einfach mx-auto für gleiche Ränder auf beiden Seiten:
<div class="row">
<div class="col-md-4 mx-auto">
.
</div>
</div>
Hinweis: Die spezifischen Spaltenoffsetklassen werden in Beta 2 wieder eingeführt.
Das obige ist der detaillierte Inhalt vonWie erreicht man benutzerdefinierte Spaltenversätze in Bootstrap 4 Beta?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!