Source

Плавать

Переключайте плавающие элементы для любого элемента через любую точку останова, используя наши гибкие утилиты для плавающих элементов.

Обзор

Эти служебные классы перемещают элемент влево или вправо или отключают плавание в зависимости от текущего размера области просмотра с помощью свойства CSSfloat . !importantвключен, чтобы избежать проблем со специфичностью. Они используют те же точки останова области просмотра, что и наша сеточная система.

Классы

Переключить поплавок с классом:

Плавающий левый на всех размерах окна просмотра

Плавающее право на всех размерах окна просмотра

Не плавайте на всех размерах окна просмотра 
<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:

.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