Source

Flotteur

Basculez les flotteurs sur n'importe quel élément, sur n'importe quel point d'arrêt, à l'aide de nos utilitaires flottants réactifs.

Aperçu

Ces classes utilitaires font flotter un élément vers la gauche ou la droite, ou désactivent le flottement, en fonction de la taille actuelle de la fenêtre d'affichage à l'aide de la propriété CSSfloat . !importantest inclus pour éviter les problèmes de spécificité. Ceux-ci utilisent les mêmes points d'arrêt de fenêtre que notre système de grille. Veuillez noter que les utilitaires flottants n'ont aucun effet sur les éléments flexibles.

Des classes

Basculer un flottant avec une classe :

Flotteur à gauche sur toutes les tailles de fenêtre

Flottez à droite sur toutes les tailles de fenêtre

Ne flotte pas sur toutes les tailles de fenêtres 
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Mélanges

Ou par Sass mixin :

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Sensible

Des variations réactives existent également pour chaque floatvaleur.

Flottez à gauche sur les fenêtres de taille SM (petites) ou plus larges

Flottement à gauche sur les fenêtres de taille MD (moyenne) ou plus large

Flottez à gauche sur les fenêtres de taille LG (grande) ou plus larges

Flottez à gauche sur les fenêtres de taille XL (extra-large) ou plus larges 

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

Voici toutes les classes de soutien;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none