Cosa è successo alle classi .pull-left e .pull-right in Bootstrap 4?

Nella versione più recente pull-left e pull-right sono stati sostituiti da .pull- {xs, sm, md, lg, xl} - {left, right, none}

Ciò significa che invece di scrivere un semplice class="pull-right", ora dovrò scrivereclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

C'è un modo meno noioso per farlo?

Nel 2016, quando questa domanda è stata inizialmente posta, la risposta era:

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

Ma ora la risposta accettata dovrebbe essere quella di Robert Went.

Le classi sono float-right float-sm-rightecc.

Le media query sono prima mobile, quindi l'utilizzo float-sm-rightinfluenzerebbe le dimensioni dello schermo piccolo e qualsiasi cosa più ampia, quindi non c'è motivo di aggiungere una classe per ogni larghezza. Usa semplicemente lo schermo più piccolo che desideri influenzare o float-rightper tutte le larghezze dello schermo.

Documenti ufficiali:

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

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

Se stai aggiornando un progetto esistente basato su una versione precedente di Bootstrap, puoi usare sass extension per applicare le regole ai vecchi nomi di classe:

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

Aggiornamento 2018 (a partire da Bootstrap 4.1)

Sì, pull-lefte pull-rightsono stati sostituiti con float-lefte float-rightin Bootstrap 4.

Tuttavia, i float non funzioneranno in tutti i casi poiché Bootstrap 4 è ora flexbox .

Per i bambini Flexbox adeguamento alla destra, uso auto-margini (es: ml-auto) oi utils Flexbox (es: justify-content-end, align-self-end, ecc ..).

Esempi

Nav:

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

Briciole di pane:

<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

Griglia:

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

Cambiato float-right float-left float-xx-leftefloat-xx-right

Se vuoi usare quelli con colonne in un altro lavoro con le col-*classi, puoi usare le order-*classi.

Puoi controllare l'ordine delle tue colonne con le classi di ordine. vedere di più nella documentazione di Bootstrap 4

Un semplice dai documenti 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>

Thay vengono rimossi.

Usa float-leftinvece di pull-left. E float-rightinvece di pull-right.

Controlla la documentazione bootstrap qui :

Aggiunte classi .float- {sm, md, lg, xl} - {left, right, none} per i float reattivi e rimosse .pull-left e .pull-right poiché sono ridondanti per .float-left e .float- giusto.

Sono stato in grado di farlo con le seguenti classi nel mio progetto

d-flex justify-content-end

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

Nient'altro funzionava per me. Questo lo ha fatto. Questo potrebbe aiutare qualcuno.

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

Avvolgere tutto in clearfix div è la chiave.

bootstrap-4 aggiunge la classe float-left o right per il floating

Per chiunque altro e solo un'aggiunta a Robert, se il tuo nav ha un valore di visualizzazione flessibile, puoi spostare l'elemento che ti serve a destra, aggiungendolo al suo css

{
    margin-left: auto;
}