Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
in English

Platforma

Przełącz pływaki na dowolnym elemencie, w dowolnym punkcie przerwania, korzystając z naszych responsywnych narzędzi pływających.

Przegląd

Te klasy narzędziowe przesuwają element w lewo lub w prawo lub wyłączają pływanie w oparciu o bieżący rozmiar widocznego obszaru za pomocą właściwości CSSfloat . !importantjest uwzględniony, aby uniknąć problemów ze specyficznością. Używają one tych samych punktów przerwania rzutni, co nasz system siatki. Należy pamiętać, że narzędzia zmiennoprzecinkowe nie mają wpływu na elementy elastyczne.

Rozpoczęcie pływania we wszystkich rozmiarach widocznych okien

Ruchomy koniec we wszystkich rozmiarach rzutni

Nie pływaj we wszystkich rozmiarach widocznych okien
<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>

Czuły

floatDla każdej wartości istnieją również elastyczne odmiany .

Rozpoczęcie pływania na rzutniach o rozmiarze SM (małym) lub szerszym

Rozpoczęcie pływania na wziernikach o rozmiarze MD (średnim) lub szerszym

Rozpoczęcie pływania na rzutniach o rozmiarze LG (dużym) lub szerszym

Rozpoczęcie pływania na rzutniach o rozmiarze XL (bardzo duże) lub szerszych

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

Oto wszystkie klasy wsparcia:

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

Narzędzia API

Narzędzia zmiennoprzecinkowe są deklarowane w naszym interfejsie API narzędzi w scss/_utilities.scss. Dowiedz się, jak korzystać z interfejsu API narzędzi.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),