Source

Lebdi

Preklapljajte lebdeče na katerem koli elementu, prek katere koli prekinitvene točke, z uporabo naših odzivnih pripomočkov za lebdeče.

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 ne vplivajo na elemente flex.

Razredi

Preklopi lebdeč z razredom:

Lebdi levo na vseh velikostih vidnih oken

Lebdi desno na vseh velikostih vidnih oken

Ne lebdite na vseh velikostih vidnega polja 
<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

Ali pa Sass mixin:

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

Odzivna

floatZa vsako vrednost obstajajo tudi odzivne različice .

Lebdenje levo na pogledih velikosti SM (majhno) ali širše

Lebdenje levo na pogledih velikosti MD (srednje) ali širše

Lebdenje levo na poglednih oknih velikosti LG (veliko) ali širše

Lebdi levo na poglednih oknih velikosti XL (zelo veliko) ali širših 

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

Tukaj so vsi podporni razredi;

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