Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

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.

Float-Start bei allen Viewport-Größen

Schwebendes Ende bei allen Ansichtsfenstergrößen

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

Schwebender Start bei Ansichtsfenstern der Größe SM (klein) oder breiter

Schwebender Start bei Ansichtsfenstern der Größe MD (mittel) oder breiter

Schwebender Start bei Ansichtsfenstern der Größe LG (groß) oder breiter

Schwebender Start auf Sichtfenstern der Größe XL (extra groß) oder breiter

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