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.).
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; }