Float

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

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

Обзор

Эти классы располагают элемент слева или справа, или выключают «прибивку» к определенному краю, основываясь на текущем размере области видимости, используя свойство float в CSS. Здесь задано !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,
      )
    ),