Source

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 float nie mają wpływu na elementy elastyczne.

Klasy

Przełącz pływak z klasą:

Unieś się w lewo we wszystkich rozmiarach widocznych okien

Unosić się w prawo we wszystkich rozmiarach widocznych okien

Nie poruszaj się we wszystkich rozmiarach widocznych okien 
<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>

Mieszanki

Lub przez mixin Sass:

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

Czuły

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

Przesuń w lewo na rzutniach o rozmiarze SM (małym) lub szerszym

Przesuń w lewo na MD o rozmiarze MD (średnim) lub szerszym

Przesuń w lewo na rzutniach o rozmiarze LG (dużym) lub szerszym

Unieś się w lewo na rzutniach o rozmiarze XL (bardzo duży) lub szerszym 

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

Oto wszystkie klasy wsparcia;

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