Offset-Spalten funktioniert nicht (Bootstrap v4.0.0-beta)

Ich verwende Boostrap 4 (Bootstrap v4.0.0-Beta) Beta und Probleme mit Offset-Spalten. Früher habe ich offset-md- * getan und es funktionierte, mit BS4 Beta ist dies nach docs entfernt. Die neue Methode in der Dokumentation verwendet .ml-auto, wenn ich versuche, es mit col-md-4 zu verwenden, ist es Offset 4 Spalten. Was ich will, ist ausgeglichen individuelle wieOffset-Spalten funktioniert nicht (Bootstrap v4.0.0-beta)

**<div class="col-md-4 offset-md-2"></div>**

Ich versuchte

**<div class="col-md-4 ml-md-2"></div>**

verwenden, aber hat nicht funktioniert Ist dieser Fehler ist oder gibt es einen anderen Weg, es zu tun?

ist hier offizielle Dokumentation über https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Quelle

2017-08-12 Prashant Sharma

Warum verwenden Sie 'ml'? –

Bootstrap 4 offset Klassen wurden in Beta 1, entfernt aber in Beta 2

Die neue auto-margin replacements for offset wiederhergestellt wird die Säule über so viel wie möglich bewegen. Es hängt also davon ab, wie stark Sie die Spalte nach rechts "schieben" wollen. Wenn sie keine anderen Spalten auf der rechten Seite der col-md-4 sind, wird es den ganzen Weg gehen, wenn auf der rechten Seite der row. Grundsätzlich war offset für Floating-Spalten relevant, ist aber jetzt nicht mehr relevant, da Bootstrap 4 Flexbox ist.

Wenn Sie die col-md-4 über nur 2 Säuleneinheiten bewegen wollen, wäre der beste Weg einen Dummy/Platzhalter Spalte ...

<div class="row"> 
     <div class="col-md-2"></div> 
     <div class="col-md-4"> 
      .. 
     </div> 
</div>

https://www.codeply.com/go/SqrQIOAY7

Wenn es andere zu benutzen, col-md-4 auf der rechten Seite des ersten, dann ml-auto und mr-auto würde funktionieren Mitte beide Spalten ...

<div class="row"> 
     <div class="col-md-4 ml-auto"> 
      . 
     </div> 
     <div class="col-md-4 mr-auto"> 
      . 
     </div> 
</div>

https://www.codeply.com/go/SqrQIOAY7n

Wenn Sie die col-md-4 dann einfach mx-auto zu gleich Ränder erstellen, die auf beiden Seiten verwenden zentrieren möchten.

Hinweis: bestimmte Spalte offsets will be restored as of Beta 2

Quelle

2017-08-12 17:09:49 ZimSystem

Danke, aber dieses leere Div mit Col-MD-2 scheint wie ein "Hack" Nein ?, das ist, was ich vor dem Posten dieser Frage verwendet habe. Ich werde Ihre zweite Lösung verwenden, da ich eine andere Col-md-4 auf der rechten Seite habe, ich werde Sie wissen lassen, ob dies mein Problem löst. –

Es mag wie ein Hack erscheinen, aber es ist die einzige Lösung, jetzt, wo die Offsets durch automatische Ränder ersetzt wurden. – ZimSystem

Vielen Dank für Ihren Tipp, Ihre 2. Lösung arbeitete für mich und ich denke, für die Zeit werde ich eine leere div an anderen Orten verwenden, bis Bootstrap etwas neues zum Ausgleich bekommen. –

ml-md-auto Sets margin-left: auto; für Größen md und vor Verrechnung.

Sie können das nicht auf etwas wie 2 setzen.

Sie müssen ml-md-auto tun.

Quelle

2017-08-12 13:47:50

Siehe [docs] (http://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns) –

Ich benutze Bootstrap v4 Beta, Sie haben doc Link der Alpha-Version zur Verfügung gestellt. Meine Frage wurde mit dem Link der Dokumentation aktualisiert. –

Oliver, wenn ich versuche, ml-md-Auto zu verwenden, verschiebt es 4 Spalten, was ich will, ist Offset 2 Spalten, aber mit col-md-4 –

Ändern

offset-md-2

zu:

col-md-offset-2

für mich gearbeitet

Quelle

2018-01-02 22:09:18 clamchoda

Offset-Spalten funktioniert nicht (Bootstrap v4.0.0-beta)

Antwort

Verwandte Themen