Обзор
Эти служебные классы перемещают элемент влево или вправо или отключают плавающий режим в зависимости от текущего размера области просмотра с помощью float
свойства CSS . !important
включен, чтобы избежать проблем со спецификой. Они используют те же точки останова области просмотра, что и наша сеточная система. Имейте в виду, что плавающие утилиты не влияют на гибкие элементы.
Плавающий слева на всех размерах области просмотра
Плавайте вправо при всех размерах области просмотра
Не плавать при всех размерах области просмотра
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
Отзывчивый
Адаптивные варианты также существуют для каждого float
значения.
Плавающий влево на видовых экранах размером SM (маленький) или шире
Плавающий влево на видовых экранах размером MD (средний) или шире
Плавающий влево на окнах просмотра размером LG (большой) или шире
Плавающий влево на видовых экранах размера XL (очень большой) или шире
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
Вот все классы поддержки:
.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none
.float-xxl-left
.float-xxl-right
.float-xxl-none