in English
Flyde
Skift flydere på ethvert element, på tværs af ethvert breakpoint ved hjælp af vores responsive flydende hjælpeprogrammer.
På denne side
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 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 float
væ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,
)
),