Перейти к основному контенту Перейти к навигации документации

Плавающие элементы

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

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

Обзор

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

Float start on all viewport sizes

Float end on all viewport sizes

Don’t float on all viewport sizes
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>

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

Отзывчивость

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

Float end on viewports sized SM (small) or wider

Float end on viewports sized MD (medium) or wider

Float end on viewports sized LG (large) or wider

Float end on viewports sized XL (extra large) or wider

Float end on viewports sized XXL (extra extra large) or wider

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

CSS

API утилит Sass

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

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