Source

Vlot

Wissel dryfmiddels op enige element, oor enige breekpunt, met behulp van ons responsiewe dryfhulpmiddels.

Oorsig

Hierdie nutsklasse dryf 'n element na links of regs, of deaktiveer swewend, gebaseer op die huidige viewport-grootte deur die CSS - floateienskap te gebruik . !importantis ingesluit om spesifisiteitskwessies te vermy. Hierdie gebruik dieselfde uitsigpoort-breekpunte as ons roosterstelsel. Wees asseblief bewus daarvan dat dryfhulpmiddels geen invloed op buigitems het nie.

Klasse

Wissel 'n vlot met 'n klas:

Vryf links op alle uitsigpoortgroottes

Dryf regs op alle uitsigpoortgroottes

Moenie op alle viewport-groottes dryf nie 
<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>

Mengsels

Of deur Sass mixin:

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

Responsief

Responsiewe variasies bestaan ​​ook vir elke floatwaarde.

Vryf links op uitsigpoorte van grootte SM (klein) of breër

Vryf links op uitsigpoorte van MD (medium) of wyer

Sweef links op kykpoorte van LG (groot) of breër

Vryf links op uitsigpoorte van grootte XL (ekstra groot) of wyer 

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

Hier is al die ondersteuningsklasse;

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