Source

Float

Lülitage hõljukid mis tahes elemendil, mis tahes katkestuspunktis, kasutades meie reageerivaid hõljukutiliite.

Ülevaade

Need utiliidiklassid ujutavad elemendi vasakule või paremale või keelavad ujumise, võttes aluseks praeguse vaateava suuruse, kasutades CSS -i floatatribuuti . !importanton lisatud spetsiifilisuse probleemide vältimiseks. Need kasutavad samu vaateava murdepunkte kui meie ruudustikusüsteem. Pange tähele, et ujuki utiliidid ei mõjuta painduvaid esemeid.

klassid

Ujuki vahetamine klassiga:

Hõljutage vasakule kõigis vaateava suurustes

Hõljuge paremale kõigis vaateava suurustes

Ärge hõljuge kõigis vaateava suurustes 
<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>

Segud

Või Sass mixini poolt:

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

Vastutulelik

floatIga väärtuse jaoks on olemas ka reageerivad variatsioonid .

Hõljuge vasakule SM (väike) või laiemate vaateavade puhul

Hõljuge vasakule MD (keskmise) või laiemate vaateavade puhul

Hõljuge vasakule LG (suure) või laiemate vaateavade puhul

Hõljuge vasakule XL (eriti suur) või laiemate vaateavade puhul 

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

Siin on kõik tugiklassid;

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