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 . !importantje 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

html

<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

floatZa 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

html

<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 pripomočkov.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),