Source

Поплавък

Превключвайте float на всеки елемент, през всяка точка на прекъсване, като използвате нашите гъвкави помощни програми за float.

Преглед

Тези помощни класове преместват елемент отляво или отдясно или дезактивират плаващото въз основа на текущия размер на прозореца за изглед, използвайки свойството CSSfloat . !importantе включен, за да се избегнат проблеми със специфичността. Те използват същите точки на прекъсване на изгледа като нашата мрежова система. Моля, имайте предвид, че помощните програми за float нямат ефект върху flex елементи.

Класове

Превключете float с клас:

Плаване наляво при всички размери на прозорците

Плаване надясно на всички размери на прозорците

Не плавайте във всички размери на прозорците 
<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>

Миксини

Или от Sass mixin:

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

Отзивчив

floatЗа всяка стойност също съществуват адаптивни вариации .

Плаване наляво върху прозорци с размер SM (малък) или по-широк

Плаване наляво върху прозорци с размер MD (среден) или по-широк

Плаване наляво в прозорци с размер LG (голям) или по-широк

Плаване наляво върху прозорци с размер XL (изключително голям) или по-широк 

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

Ето всички класове за поддръжка;

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