Перейти к основному содержанию

Float

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

Содержание

Обзор

Эти служебные классы перемещают элемент влево или вправо или отключают плавающий режим в зависимости от текущего размера области просмотра с помощью 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>

Вот все классы поддержки: