Source

Plavák

Prepínajte plávajúce objekty na ľubovoľnom prvku, cez akýkoľvek bod prerušenia, pomocou našich responzívnych plávajúcich nástrojov.

Prehľad

Tieto pomocné triedy umiestňujú prvok doľava alebo doprava alebo zakážu plávanie na základe aktuálnej veľkosti výrezu pomocou vlastnosti CSSfloat . !importantje zahrnutá, aby sa predišlo problémom so špecifickosťou. Používajú rovnaké body prerušenia zobrazenia ako náš mriežkový systém.

triedy

Prepnúť float s triedou:

Plávať doľava na všetkých veľkostiach výrezu

Plávať vpravo na všetkých veľkostiach výrezu

Neplávajte na všetkých veľkostiach výrezu 
<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

Alebo podľa Sass mixin:

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

Responzívne

floatPre každú hodnotu existujú aj responzívne variácie .

Na výrezoch veľkosti SM (malých) alebo širších sa pohybujte doľava

Pohybujte sa doľava na výrezoch veľkosti MD (stredné) alebo širšie

Plávajúce vľavo na výrezoch veľkosti LG (veľké) alebo širšie

Plávajúce vľavo na výrezoch veľkosti XL (extra veľké) alebo širšie 

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

Tu sú všetky triedy podpory;

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