Плавать

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

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

Обзор

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

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

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

Не плавайте на всех размерах окна просмотра

HTML

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Отзывчивый

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

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

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

Плавающий старт на видовых экранах размером LG (большой) или шире

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

HTML

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</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

Сасс

API утилит

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

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