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

Обзор

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

Классы

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

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

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

Не плавающий при всех размерах области просмотра
<div class="float-left">Плавающий слева на всех размерах области просмотра</div><br>
<div class="float-right">Плавающий справа при всех размерах области просмотра</div><br>
<div class="float-none">Не плавающий при всех размерах области просмотра</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">Плавающие влево на размере окна просмотра SM (маленький) или шире</div><br>
<div class="float-md-left">Плавающие влево на размере окна просмотра MD (средний) или шире</div><br>
<div class="float-lg-left">Плавающие влево на размере окна просмотра LG (большой) или шире</div><br>
<div class="float-xl-left">Плавающие влево на размере окна просмотра XL (очень большой) или шире</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