Qu'est-il arrivé aux classes .pull-left et .pull-right dans Bootstrap 4?

Dans la dernière version, le pull-left et le pull-right ont été remplacés par .pull- {xs, sm, md, lg, xl} - {left, right, none}

Cela signifie qu'au lieu d'écrire un simple class="pull-right", je vais maintenant devoir écrireclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Existe-t-il un moyen moins fastidieux de le faire?

En 2016, lorsque cette question a été initialement posée, la réponse était:

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

Mais maintenant, la réponse acceptée devrait être celle de Robert Went.

Les classes sont float-right float-sm-rightetc.

Les requêtes multimédias sont axées sur le mobile, donc l'utilisation float-sm-rightaffecterait les petites tailles d'écran et tout ce qui est plus large, il n'y a donc aucune raison d'ajouter une classe pour chaque largeur. Utilisez simplement le plus petit écran que vous souhaitez affecter ou float-rightpour toutes les largeurs d'écran.

Documents officiels:

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

Mise à jour: https://getbootstrap.com/docs/4.4/migration/#utilities

Si vous mettez à jour un projet existant basé sur une version antérieure de Bootstrap, vous pouvez utiliser sass extend pour appliquer les règles aux anciens noms de classe:

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

Mise à jour 2018 (à partir de Bootstrap 4.1)

Oui, pull-leftet pull-rightont été remplacés par float-leftet float-rightdans Bootstrap 4.

Cependant, les flottants ne fonctionneront pas dans tous les cas puisque Bootstrap 4 est désormais flexbox .

Pour aligner les enfants ēno à droite, utiliser les marges automatiques (ex: ml-auto) ou les utils ēno (ex: justify-content-end, align-self-end, etc ..).

Exemples

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>

Chapelure:

<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

La grille:

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

Changé en float-right float-left float-xx-leftetfloat-xx-right

Si vous souhaitez utiliser ceux avec des colonnes dans un autre travail avec des col-*classes, vous pouvez utiliser des order-*classes.

Vous pouvez contrôler l'ordre de vos colonnes avec des classes d'ordre. en savoir plus dans la documentation Bootstrap 4

Un simple de la documentation 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>

Ils sont supprimés.

Utilisez à la float-leftplace de pull-left. Et float-rightau lieu de pull-right.

Consultez la documentation bootstrap ici :

Ajout des classes .float- {sm, md, lg, xl} - {left, right, none} pour les flottants réactifs et supprimés .pull-left et .pull-right car ils sont redondants avec .float-left et .float- droite.

J'ai pu le faire avec les classes suivantes dans mon projet

d-flex justify-content-end

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

Rien d'autre ne fonctionnait pour moi. Celui-ci l'a fait. Cela pourrait aider quelqu'un.

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

Tout emballer dans clearfix div est la clé.

bootstrap-4 ajoute la classe float-left ou right pour le flottement

Pour n'importe qui d'autre et juste un ajout à Robert, si votre nav a une valeur d'affichage flex, vous pouvez faire flotter l'élément dont vous avez besoin vers la droite, en l'ajoutant à son css

{
    margin-left: auto;
}