Source

Úszó

Bármely elemen, bármely törésponton át lebegtetheti az úszót az érzékeny lebegő segédprogramok segítségével.

Áttekintés

Ezek a segédosztályok balra vagy jobbra lebegtetnek egy elemet, vagy letiltják a lebegést az aktuális nézetablakméret alapján a CSS floattulajdonság használatával . !importanttartalmazza a specifikus problémák elkerülése érdekében. Ezek ugyanazokat a nézetablak töréspontokat használják, mint a rácsrendszerünk. Kérjük, vegye figyelembe, hogy a float segédprogramok nincsenek hatással a rugalmas termékekre.

osztályok

Lebegtetés átváltása egy osztállyal:

Lebegtetés balra minden nézetablakméretnél

Lebegjen jobbra minden nézetablakban

Ne lebegjen minden nézetablakban 
<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

Vagy Sass mixin által:

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

Fogékony

floatAz egyes értékekhez érzékeny variációk is léteznek .

Lebegjen balra az SM (kicsi) vagy nagyobb méretű nézetablakokon

Lebegtetés balra az MD (közepes) vagy szélesebb méretű nézetablakokon

Lebegjen balra az LG (nagy) vagy szélesebb méretű nézetablakokon

Ússzon balra az XL (extra nagy) méretű vagy szélesebb nézetablakokon 

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

Itt van az összes támogató osztály;

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