Pluti
Comutați flotanți pe orice element, peste orice punct de întrerupere, folosind utilitarele noastre de răspuns.
Aceste clase de utilitate plasează un element la stânga sau la dreapta sau dezactivează flotarea, pe baza dimensiunii actuale a ferestrei de vizualizare folosind proprietatea CSSfloat . !importanteste inclus pentru a evita problemele de specificitate. Acestea folosesc aceleași puncte de întrerupere ca și sistemul nostru de grilă. Vă rugăm să rețineți că utilitățile flotante nu au niciun efect asupra articolelor flexibile.
Comutați un float cu o clasă:
Flotează la stânga pe toate dimensiunile ferestrelor de vizualizare
Plutește direct pe toate dimensiunile ferestrelor de vizualizare
Nu plutiți pe toate dimensiunile ferestrelor de vizualizare
<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>Sau prin Sass mixin:
.element {
@include float-left;
}
.another-element {
@include float-right;
}
.one-more {
@include float-none;
}Există și variații de răspuns pentru fiecare floatvaloare.
Flotați la stânga pe ferestrele de dimensiune SM (mici) sau mai largi
Flotați la stânga pe ferestrele de dimensiune MD (medie) sau mai largi
Flotați la stânga pe ferestrele de dimensiune LG (mari) sau mai largi
Flotați la stânga pe ferestrele de dimensiune XL (extra-mari) sau mai largi
<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>Aici sunt toate clasele 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