in English
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
. !important
s'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 tenen cap efecte sobre 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 float
valor.
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