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