Flyde

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 float-værktøjer ikke har nogen indflydelse på flex-varer.

Klasser

Skift en flyder med en klasse:

<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

Eller af Sass mixin:

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

Lydhør

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

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

Her er alle støtteklasserne;

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