Was ist mit den Klassen .pull-left und .pull-right in Bootstrap 4 passiert?

In der neuesten Version wurden Pull-Left und Pull-Right durch .pull- {xs, sm, md, lg, xl} - {left, right, none} ersetzt.

Das heißt, anstatt ein einfaches class="pull-right"zu schreiben, muss ich jetzt schreibenclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Gibt es einen weniger langwierigen Weg, dies zu tun?

Im Jahr 2016, als diese Frage ursprünglich gestellt wurde, lautete die Antwort:

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

Aber jetzt sollte die akzeptierte Antwort die von Robert Went sein.

Die Klassen sind float-right float-sm-rightetc.

Die Medienabfragen sind zuerst mobil. Die Verwendung float-sm-rightwirkt sich also auf kleine Bildschirmgrößen und alles, was breiter ist, aus. Es gibt also keinen Grund, für jede Breite eine Klasse hinzuzufügen. Verwenden Sie einfach den kleinsten Bildschirm, den Sie beeinflussen möchten, oder float-rightfür alle Bildschirmbreiten.

Offizielle Dokumente:

Klassen: https://getbootstrap.com/docs/4.4/utilities/float/

Aktualisierung: https://getbootstrap.com/docs/4.4/migration/#utilities

Wenn Sie ein vorhandenes Projekt basierend auf einer früheren Version von Bootstrap aktualisieren, können Sie mit sass expand die Regeln auf die alten Klassennamen anwenden:

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

Update 2018 (ab Bootstrap 4.1)

Ja, pull-leftund pull-rightwurden durch float-leftund float-rightin Bootstrap 4 ersetzt.

Allerdings schwebt nicht in allen Fällen funktionieren , da Bootstrap 4 jetzt ist Flexbox .

Um align Flexbox Kinder auf der rechten Seite , die Verwendung auto-Margen (dh ml-auto) oder die Flexbox utils (dh: justify-content-end, align-self-end, etc ..).

Beispiele

Navs:

<ul class="nav">
   <li><a href class="nav-link">Link</a></li>
   <li><a href class="nav-link">Link</a></li>
   <li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>

Semmelbrösel:

<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">Right</a></li>
</ul>

https://www.codeply.com/go/6ITgrV7pvL

Gitter:

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>

Geändert zu float-right float-left float-xx-leftundfloat-xx-right

Wenn Sie diese mit Spalten in einer anderen Arbeit mit col-*Klassen verwenden möchten , können Sie order-*Klassen verwenden.

Sie können die Reihenfolge Ihrer Spalten mit Auftragsklassen steuern. Weitere Informationen finden Sie in der Bootstrap 4-Dokumentation

Ein einfaches aus Bootstrap-Dokumenten:

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Sie werden entfernt.

Verwenden Sie float-leftanstelle von pull-left. Und float-rightstatt pull-right.

Überprüfen Sie die Bootstrap-Dokumentation hier :

.Float- {sm, md, lg, xl} - {left, right, none} Klassen für responsive Floats hinzugefügt und .pull-left und .pull-right entfernt, da sie für .float-left und .float- redundant sind. richtig.

Ich konnte dies mit den folgenden Klassen in meinem Projekt tun

d-flex justify-content-end

<div class="col-lg-6 d-flex justify-content-end">

Nichts anderes arbeitete für mich. Dieser tat es. Dies könnte jemandem helfen.

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

Alles in Clearfix Div zu verpacken ist der Schlüssel.

bootstrap-4 füge die Klasse float-left oder right zum Floating hinzu

Für alle anderen und nur eine Ergänzung zu Robert: Wenn Ihr Navi einen flexiblen Anzeigewert hat, können Sie das benötigte Element nach rechts verschieben, indem Sie es seinem CSS hinzufügen

{
    margin-left: auto;
}