web-dev-qa-db-fra.com

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

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 devoir maintenant é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?

bootstrap-4
85
Kevin J

En 2016, lorsque cette question avait été posée à l'origine, 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.

11
Phillip Senn

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

Les requêtes multimédia étant d'abord mobiles, l'utilisation de float-sm-right aurait une incidence sur les écrans de petite taille et 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-right pour toutes les largeurs d’écran.

Documents officiels:

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

Mise à jour: https://getbootstrap.com/docs/4.3/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;
}
186
Robert Went

Modifié en float-rightfloat-leftfloat-xx-left et float-xx

15
MAMADOU YAYA DIALLO

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

Pour aligner flexbox enfants à droite, utilisez des marges automatiques (c'est-à-dire: ml-auto) ou les flexbox utils (c'est-à-dire: 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="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">Right</a></li>
</ul>

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

Grid:

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

Thay sont enlevés.

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

Vérifiez bootstrap Documentation 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.

5
Usama

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

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

Un simple à partir de bootstrap _ docs:

<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>
4
Behnam Azimi

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">
4
Mallek

Rien d'autre ne travaillait 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 envelopper clearfix div est la clé.

3
Ojas Kale

bootstrap-4 add class float-left ou right pour le flottement

0
Arsalan Ahmad Khan