Плавающие

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

На этой странице

Обзор

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

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

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

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

<div class="float-start">Плавающий влево на всех размерах области просмотра</div><br>
<div class="float-end">Плавающий вправо при всех размерах области просмотра</div><br>
<div class="float-none">Не плавающий при всех размерах области просмотра</div>

Адаптивность

Адаптивные варианты также существуют для каждого значения float.

Плавающий влево на SM (маленький) размере области просмотра или шире

Плавающий влево на MD (средний) размере области просмотра или шире

Плавающий влево на LG (большой) размере области просмотра или шире

Плавающий влево на XL (очень большой) размере области просмотра или шире

<div class="float-sm-start">Плавающий влево на SM (маленький) размере области просмотра или шире</div><br>
<div class="float-md-start">Плавающий влево на MD (средний) размере области просмотра или шире</div><br>
<div class="float-lg-start">Плавающий влево на LG (большой) размере области просмотра или шире</div><br>
<div class="float-xl-start">Плавающий влево на XL (очень большой) размере области просмотра или шире</div><br>

Вот все поддерживаемые классы:

.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

API утилит

Утилиты флоат объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

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