in English
Lebdi
Preklapljajte lebdeče na katerem koli elementu, prek katere koli prekinitvene točke, z uporabo naših odzivnih pripomočkov za lebdeče.
Na tej strani
Pregled
Ti razredi pripomočkov lebdijo element v levo ali desno ali onemogočijo lebdenje glede na trenutno velikost vidnega polja z uporabo lastnosti CSSfloat
. !important
je vključen, da bi se izognili težavam s specifičnostjo. Ti uporabljajo iste prelomne točke vidnega polja kot naš sistem mreže. Upoštevajte, da pripomočki za plavajoče elemente nimajo vpliva na elemente flex.
Plavajoči začetek na vseh velikostih vidnega polja
Plavajoči konec na vseh velikostih vidnega polja
Ne lebdite na vseh velikostih vidnega polja
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
Odzivna
float
Za vsako vrednost obstajajo tudi odzivne različice .
Plavajoči začetek na poglednih oknih velikosti SM (majhno) ali širše
Plavajoči začetek na poglednih oknih velikosti MD (srednje) ali širše
Plavajoči začetek na poglednih oknih velikosti LG (veliko) ali širše
Plavajoči začetek na poglednih oknih velikosti XL (zelo veliko) ali širših
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
Tukaj so vsi podporni razredi:
.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none
Sass
API za pripomočke
Pomožni programi Float so navedeni v našem API-ju za pripomočke v scss/_utilities.scss
. Naučite se uporabljati API za pripomočke.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),