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 - floatEigenschaft . !importantist 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.

Klassen

Schalten Sie einen Float mit einer Klasse um:

<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

Oder von Sass Mixin:

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

Reaktionsschnell

Responsive Variationen existieren auch für jeden floatWert.

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

Hier sind alle Support-Klassen;

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