Source

Schwammen

Toggle Floats op all Element, iwwer all Breakpoint, mat eise reaktiounsfäeger Float Utilities.

Iwwersiicht

Dës Utility-Klassen schwiewen en Element lénks oder riets, oder deaktivéieren Schwammen, baséiert op der aktueller Viewportgréisst mat der CSS - floatEegeschaft . !importantass abegraff fir Spezifizitéitsprobleemer ze vermeiden. Dës benotzen déiselwecht Viewport Breakpoints wéi eise Gittersystem. W.e.g. bewosst Float Utilities hunn keen Afloss op Flex Artikelen.

Klassen

Toggle e Float mat enger Klass:

Float lénks op all Viewport Gréissten

Fléisst direkt op all Viewport Gréissten

Schwammen net op all Viewport Gréissten 
<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

Oder duerch Sass mixin:

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

Reaktiounsfäeger

Reaktiounsfäeger Variatiounen existéieren och fir all floatWäert.

Float lénks op viewports Gréisst SM (kleng) oder méi breet

Float lénks op Viewports Gréisst MD (mëttel) oder méi breet

Float lénks op Viewports mat LG (grouss) oder méi breed

Float lénks op Viewports Gréisst XL (extra-grouss) oder méi breet 

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

Hei sinn all Ënnerstëtzung Klassen;

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