Spring til hovedindhold Spring til dokumentnavigation

Skift flydere på ethvert element, på tværs af ethvert breakpoint ved hjælp af vores responsive flydende hjælpeprogrammer.

Oversigt

Disse hjælpeklasser flyder et element til venstre eller højre, eller deaktiverer flydende, baseret på den aktuelle viewport-størrelse ved hjælp af CSS - floategenskaben . !importanter inkluderet for at undgå specificitetsproblemer. Disse bruger de samme viewport-brudpunkter som vores grid-system. Vær opmærksom på, at flydeværktøjer ikke har nogen effekt på flexvarer.

Flydende start på alle viewport-størrelser

Flydeende på alle viewport-størrelser

Flyd ikke på alle viewport-størrelser
<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>

Lydhør

Der findes også responsive variationer for hver floatværdi.

Flydende start på viewporte i størrelsen SM (lille) eller bredere

Flydende start på viewports størrelse MD (medium) eller bredere

Flydende start på viewports størrelse LG (large) eller bredere

Flydende start på viewports størrelse XL (ekstra stor) eller bredere

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

Her er alle supportklasserne:

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

Hjælpeprogrammer API

Float-værktøjer er deklareret i vores utilities API i scss/_utilities.scss. Lær, hvordan du bruger utilities API.

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