Source

Flota

Commuta els flotants a qualsevol element, a qualsevol punt d'interrupció, utilitzant les nostres utilitats flotants sensibles.

Visió general

Aquestes classes d'utilitat fan flotar un element cap a l'esquerra o cap a la dreta, o desactiven el flotant, en funció de la mida actual de la finestra gràfica mitjançant la propietat CSSfloat . !importants'inclou per evitar problemes d'especificitat. Aquests utilitzen els mateixos punts d'interrupció de la vista que el nostre sistema de quadrícula. Tingueu en compte que les utilitats flotants no afecten els elements flexibles.

Classes

Commuta un flotant amb una classe:

Flota a l'esquerra en totes les mides de la finestra gràfica

Flota a la dreta en totes les mides de la finestra gràfica

No sureu en totes les mides de la finestra gràfica
<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>

Mixins

O per Sass mixin:

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

Responent

També existeixen variacions de resposta per a cada floatvalor.

Flota a l'esquerra a les finestres de mida SM (petites) o més amples

Flota a l'esquerra a les finestres de mida MD (mitjana) o més amples

Flota a l'esquerra a les finestres de mida LG (grans) o més amples

Flota a l'esquerra a les finestres de mida XL (extragrans) o més amples

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

Aquí teniu totes les classes de suport;

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