Driuwe

Skeakelje driuwers op elk elemint, oer elk brekpunt, mei ús responsive float-hulpprogramma's.

Op dizze side

Oersicht

Dizze nutklassen driuwe in elemint nei lofts of rjochts, of skeakelje driuwend út, basearre op de hjoeddeistige viewportgrutte mei it CSS - floateigenskip . !importantis opnommen om spesifisiteitsproblemen te foarkommen. Dizze brûke deselde viewport breakpoints as ús rastersysteem. Wês asjebleaft bewust dat floatprogramma's gjin effekt hawwe op flexitems.

Float start op alle viewport maten

Float ein op alle viewport maten

Float net op alle viewportgrutte

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>

Responsive

Responsive fariaasjes besteane ek foar elke floatwearde.

Float start op viewports grutte SM (lyts) of breder

Floatstart op viewports grutte MD (medium) of breder

Float start op viewports grutte LG (grut) of breder

Floatstart op viewports grutte XL (ekstra grut) of breder

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>

Hjir binne alle stipeklassen:

.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 wurde ferklearre yn ús utilities API yn scss/_utilities.scss. Learje hoe't jo de utilities API brûke.

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