in English
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 - float
egenskaben . !important
er 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 effekt på flexvarer.
Klasser
Skift en flyder med en klasse:
Flyd til venstre på alle viewport-størrelser
Flyd lige på alle viewport-størrelser
Flyd ikke på alle viewport-størrelser
<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 float
værdi.
Flyd til venstre på viewports størrelse SM (lille) eller bredere
Flyd til venstre på viewports størrelse MD (medium) eller bredere
Flyd til venstre på viewports størrelse LG (large) eller bredere
Flyd til venstre på viewports størrelse XL (ekstra stor) eller bredere
<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