Schwammen

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

Op dëser Säit

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 Effekt op Flex Artikelen.

Float Start op all Viewport Gréissten

Float Enn op all Viewport Gréissten

Schwammen net op all Viewport Gréissten

html

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Reaktiounsfäeger

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

Floatstart op Viewports Gréisst SM (kleng) oder méi breet

Floatstart op Viewports Gréisst MD (mëttel) oder méi breet

Floatstart op Viewports mat LG (grouss) oder méi breed

Floatstart op Viewports Gréisst XL (extra-grouss) oder méi breet

html

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Hei sinn all Ënnerstëtzungsklassen:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

Utilities API

Float Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),