Co się stało z klasami .pull-left i .pull-right w Bootstrap 4?

W najnowszej wersji pull-left i pull-right zostały zastąpione przez .pull- {xs, sm, md, lg, xl} - {left, right, none}

Oznacza to, że zamiast pisać proste class="pull-right", będę musiał teraz napisaćclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Czy można to zrobić w mniej żmudny sposób?

W 2016 roku, kiedy pierwotnie zadano to pytanie, odpowiedź brzmiała:

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

Ale teraz akceptowana odpowiedź powinna należeć do Roberta Wenta.

Zajęcia są float-right float-sm-rightitp.

Zapytania o media są skierowane przede wszystkim do urządzeń mobilnych, więc użycie float-sm-rightwpłynęłoby na małe rozmiary ekranu i wszystko szersze, więc nie ma powodu, aby dodawać klasy dla każdej szerokości. Po prostu użyj najmniejszego ekranu, na który chcesz wpłynąć, lub float-rightdla wszystkich szerokości ekranu.

Oficjalne dokumenty:

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

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

Jeśli aktualizujesz istniejący projekt oparty na wcześniejszej wersji Bootstrap, możesz użyć rozszerzenia sass, aby zastosować reguły do ​​starych nazw klas:

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

Aktualizacja 2018 (od Bootstrap 4.1)

Tak, pull-lefti pull-rightzostały zastąpione przez float-leftiw float-rightBootstrap 4.

Jednak pływaki nie będą działać we wszystkich przypadkach, ponieważ Bootstrap 4 to teraz flexbox .

Aby wyrównać dzieci schematu flexbox w prawo Użyj automatycznego marginesy (tj ml-auto) lub utils schematu flexbox (tj justify-content-end, align-self-enditp ..).

Przykłady

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>

Bułka tarta:

<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

Krata:

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

Zmieniono na float-right float-left float-xx-leftifloat-xx-right

Jeśli chcesz użyć tych z kolumnami w innej pracy z col-*klasami, możesz użyć order-*klas.

Możesz kontrolować kolejność kolumn za pomocą klas zamówienia. zobacz więcej w dokumentacji Bootstrap 4

Prosty z dokumentów bootstrap:

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

Te są usuwane.

Użyj float-leftzamiast pull-left. A float-rightzamiast tego pull-right.

Sprawdź dokumentację bootstrap tutaj :

Dodano klasy .float- {sm, md, lg, xl} - {left, right, none} dla responsywnych elementów zmiennoprzecinkowych oraz usunięto .pull-left i .pull-right, ponieważ są one nadmiarowe dla .float-left i .float- dobrze.

Udało mi się to zrobić z następującymi zajęciami w moim projekcie

d-flex justify-content-end

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

Nic innego nie działało dla mnie. Ten zrobił. To może komuś pomóc.

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

Kluczem jest zawinięcie wszystkiego w clearfix div.

bootstrap-4 dodaje klasę float-left lub right do unoszenia

Dla kogokolwiek innego i tylko dodatek do Roberta, jeśli twoja nawigacja ma wyświetlaną wartość flex, możesz przesunąć potrzebny element po prawej stronie, dodając go do jego css

{
    margin-left: auto;
}