Source

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:

Bei allen Ansichtsfenstergrößen nach links schweben

Schweben Sie direkt auf allen Ansichtsfenstergrößen

Schweben Sie nicht in allen Ansichtsfenstergrößen
<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.

Auf Ansichtsfenstern der Größe SM (klein) oder breiter nach links schweben

Auf Ansichtsfenstern der Größe MD (mittel) oder breiter nach links schweben

Auf Ansichtsfenstern der Größe LG (groß) oder breiter nach links schweben

Auf Ansichtsfenstern der Größe XL (extra groß) oder breiter nach links schweben

<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