Vlot

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

Op hierdie bladsy

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. Neem asseblief kennis dat dryfhulpmiddels geen effek op buigsame items het nie.

Vlotterbegin op alle viewport-groottes

Vlotterkant op alle uitsigpoortgroottes

Moenie op alle viewport-groottes dryf nie

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

Responsief

Responsiewe variasies bestaan ook vir elke floatwaarde.

Vlotterbegin op uitkykpoorte van SM (klein) of breër

Vlotterbegin op uitkykpoorte van MD (medium) of wyer

Vlotterbegin op kykpoorte van LG (groot) of breër

Vlotterbegin op uitsigpoorte van grootte XL (ekstra groot) of wyer

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

Hier is al die ondersteuningsklasse:

.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 word verklaar in ons utilities API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.

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