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

Question

Dans la nouvelle version, pull-left et pull-right 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" , je vais maintenant devoir écrire class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Y a-t-il un moyen moins fastidieux de le faire?

Answer 1

Pour quelqu'un d'autre de trouver ceci:

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

Les media queries sont "mobile first", donc à l'aide d' float-sm-right aurait une incidence sur les petites tailles d'écran et quelque chose de plus large, de sorte que (pour l'instant) il n'y a aucune raison d'ajouter une classe pour chaque largeur. Suffit d'utiliser la plus petite de l'écran que vous souhaitez affecter ou float-right pour toutes les largeurs d'écran.

Officiel Docs:

Catégories: https://getbootstrap.com/docs/4.0/utilities/float/

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

Si vous êtes à la mise à jour d'un projet existant basé sur une version antérieure de Bootstrap, vous pouvez utiliser sass étendre à appliquer les règles à la vieille classe des noms:

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

Answer 2

Mise à jour 2018 (comme Bootstrap 4.1)

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

Cependant, les flotteurs ne fonctionnera pas dans tous les cas, car Bootstrap 4 est maintenant flexbox.

Pour aligner flexbox enfants vers la droite, utilisez l'auto-marges (ie: ml-auto) ou la flexbox utils (ie: justify-content-end, align-self-end, etc..).

Exemples

Trajets:

<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="http://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="http://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="http://stackoverflow.com/">Right</a></li>
</ul>

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

Grille:

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

Answer 3

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

Answer 4

Thay sont enlevés.

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

Vérifiez la documentation de bootstrap ici :

Ajout des classes .float- {sm, md, lg, xl} - {left, right, none} pour les flottants réactifs et suppression des fichiers .pull-left et .pull-right puisqu'ils sont redondants en .float-left et .float- droite.

Answer 5

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

 d-flex justify-content-end

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