Wat is er gebeurd met de klassen .pull-left en .pull-right in Bootstrap 4?

In de nieuwste versie zijn de pull-left en pull-right vervangen door .pull-{xs,sm,md,lg,xl}-{left,right,none}

Dat betekent dat ik in plaats van een simpele class="pull-right"te schrijven, nu class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Is er een minder vervelende manier om het te doen?

Antwoord 1, autoriteit 100%

In 2016, toen deze vraag oorspronkelijk werd gesteld, was het antwoord:

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

Maar nu zou het geaccepteerde antwoord dat van Robert Went moeten zijn.

Antwoord 2, autoriteit 92%

De klassen zijn float-rightfloat-sm-rightenz.

De mediaquery’s zijn eerst mobiel, dus het gebruik van float-sm-rightheeft invloed op kleine schermformaten en alles wat breder is, dus er is geen reden om een klasse toe te voegen voor elke breedte. Gebruik gewoon het kleinste scherm dat u wilt beïnvloeden of float-rightvoor alle schermbreedtes.

Officiële documenten:

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

Bijwerken: https://getbootstrap.com/docs/4.6/migration/#utilities

Als u een bestaand project bijwerkt op basis van een eerdere versie van Bootstrap, kunt u sass extend gebruiken om de regels toe te passen op de oude klassenamen:

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

Antwoord 3, autoriteit 96%

Update 2021 (vanaf Bootstrap 5)

Vanwege nieuwe RTL-ondersteuning zijn float-leften float-rightvervangen door float-starten float-endin Bootstrap 5.

Update 2018 (vanaf Bootstrap 4.1)

Ja, pull-leften pull-rightzijn vervangen door float-leften float-rightin Bootstrap 4.

floatswerken echter niet in alle gevallen, aangezien Bootstrap 4 nu flexboxis.

Om flexbox-kinderen rechts uit te lijnen, gebruikt u automatische marges (dwz: ml-auto) of de flexbox-utils (dwz: justify-content-end, align-self-end, enz.).

Voorbeelden

Navigaties:

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

Broodkruimels:

<ul class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">Right</a></li>
</ul>
https://www.codeply.com/go/6ITgrV7pvL

Raster:

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

Antwoord 4, autoriteit 97%

Gewijzigd in float-rightfloat-leftfloat-xx-leften float-xx-right

Antwoord 5, autoriteit 38%

Als je die met kolommen wilt gebruiken in een ander werk met col-*klassen, kun je order-*klassen gebruiken.

U kunt de volgorde van uw kolommen bepalen met bestelklassen. zie meer in Bootstrap 4-documentatie

Een simpele uit bootstrap-documenten:

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

Antwoord 6, autoriteit 38%

Ze zijn verwijderd.

Gebruik float-leftin plaats van pull-left.
En float-rightin plaats van pull-right.

Bekijk de bootstrap-documentatie hier:

Toegevoegd .float-{sm,md,lg,xl}-{left,right,none} klassen voor responsieve
zweeft en verwijderd .pull-left en .pull-right omdat ze overbodig zijn
naar .float-left en .float-right.

Antwoord 7, autoriteit 31%

Niets anders werkte voor mij. Deze deed het. Dit kan iemand helpen.

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

Alles in clearfixdiv verpakken is de sleutel.

Antwoord 8, autoriteit 31%

Update 2021, Bootstrap 5

In bootstrap 5zijn deze klassen hernoemd naar .float-enden .float-start.

Documenten: https://getbootstrap.com/docs/5.0/Utils/Float/

Voorbeeld:

<div class="row">
    <div class="col-12">
       <button class="btn btn-primary float-end">Login</div>
    </div>
</div>

Antwoord 9, Autoriteit 25%

Ik kon dit doen met de volgende klassen in mijn project

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

Antwoord 10

Bootstrap-4 toevoegen Klasse float-links of rechts voor zwevend

Antwoord 11

Voor iemand anders en alleen een aanvulling op Robert, als uw NAV flexweergavewaarde heeft, kunt u het element laten zweven dat u aan de rechterkant nodig hebt, door dit toe te voegen aan de CSS

{
    margin-left: auto;
}