in English
Flyta
Växla flytningar på vilket element, över vilken brytpunkt som helst, med hjälp av våra responsiva flytverktyg.
På den här sidan
Översikt
Dessa verktygsklasser flyter ett element till vänster eller höger, eller inaktiverar flytande, baserat på den aktuella visningsportstorleken med CSS- float
egenskapen . !important
ingår för att undvika specificitetsproblem. Dessa använder samma viewport-brytpunkter som vårt rutsystem. Observera att flytande verktyg inte har någon effekt på flexartiklar.
Flytstart på alla visningsportstorlekar
Flytände på alla visningsportstorlekar
Flyt inte på alla visningsportstorlekar
<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>
Mottaglig
Responsiva variationer finns också för varje float
värde.
Flytstart på visningsportar i storlek SM (liten) eller bredare
Flytande start på visningsportar i storleken MD (medium) eller bredare
Flytande start på visningsportar i storleken LG (stor) eller bredare
Flytstart på visningsportar i storlek XL (extra-large) eller bredare
<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>
Här är alla supportklasser:
.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
Flytande verktyg deklareras i vårt utilities API i scss/_utilities.scss
. Lär dig hur du använder utilities API.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),