Schweben
Schalten Sie mit unseren reaktionsschnellen Float-Dienstprogrammen Floats auf jedem Element über jeden Haltepunkt hinweg um.
Überblick
Diese Dienstprogrammklassen schweben ein Element nach links oder rechts oder deaktivieren das schwebende Element basierend auf der aktuellen Größe des Darstellungsbereichs mithilfe der CSS - float
Eigenschaft . !important
ist enthalten, um Spezifitätsprobleme zu vermeiden. Diese verwenden die gleichen Ansichtsfenster-Haltepunkte wie unser Rastersystem. Bitte beachten Sie, dass Float-Utilities keine Auswirkung auf Flex-Items haben.
<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>
Reaktionsschnell
Responsive Variationen existieren auch für jeden float
Wert.
<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>
Hier sind alle Support-Klassen:
.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
Dienstprogramme-API
Float-Utilities werden in unserer Utilities-API in deklariert scss/_utilities.scss
. Erfahren Sie, wie Sie die Utilities-API verwenden.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),