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

Dans la version la plus récente, les options à gauche et à droite ont été remplacées par .pull- {xs, sm, md, lg, xl} – {left, right, none}

Cela signifie qu’au lieu d’écrire un simple class="pull-right" , j’aurai maintenant à écrire class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Y a-t-il une façon moins fastidieuse de le faire?

En 2016, lorsque cette question avait été 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.

Pour quiconque le trouve:

Les classes sont actuellement float-right float-sm-right etc.

Les requêtes multimédias sont d’abord mobiles, donc l’utilisation de float-sm-right affecterait les petites tailles d’écran et tout ce qui est plus large. Par conséquent, il n’y a aucune raison d’append une classe pour chaque largeur. Utilisez simplement le plus petit écran que vous souhaitez affecter ou float-right pour toutes les largeurs d’écran.

Documents officiels:

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

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

Flotté à float-right float-left float-xx-left et float-xx

Thay sont enlevés.

Utilisez float-left au lieu de pull-left . Et float-right au lieu de pull-right .

Vérifiez la documentation bootstrap ici :

Ajout des classes .float- {sm, md, lg, xl} – {left, right, none} pour les flottants responsive et suppression de .pull-left et .pull-right car ils sont redondants dans .float-left et droite.

J’ai pu le faire avec les cours suivants dans mon projet

 d-flex justify-content-end 

Mise à jour 2018 (à partir de Bootstrap 4.1)

Oui, pull-left et pull-right ont été remplacés par float-left et float-right dans Bootstrap 4.

Cependant, les flottants ne fonctionneront pas dans tous les cas, car Bootstrap 4 est maintenant en mode Flexbox .

Pour aligner les enfants Flexbox vers la droite, utilisez les marges automatiques (par exemple: ml-auto ) ou les utilitaires flexbox (par exemple, justify-content-end , align-self-end , etc.).

Exemples

Navs:

  

Chapelure:

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

La grid:

 
Left
Right

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

Vous pouvez contrôler l’ordre de vos colonnes avec les classes de commande. voir plus dans la documentation de Bootstrap 4

Un simple à partir de documents bootstrap:

 
First, but unordered
Second, but last
Third, but first

bootstrap-4 ajoute la classe float-left ou right pour flotter

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

 
Float left Float right

Envelopper tout dans clearfix div est la clé.

Pour tout le monde et juste un ajout à Robert, si votre nav a une valeur d’affichage flexible, vous pouvez faire flotter l’élément dont vous avez besoin à droite, en l’ajoutant à son css

 { margin-left: auto; }