Плавающий элемент
float
sm
md
lg
xl
Классы
| Класс | Значение |
|---|---|
float-right |
float: right; |
float-left |
float: left; |
float-none |
float: none; |
Описание
Модификатор управляет расположением контекнта вокруг элемента.
Использование: {условие действия}:{модификатор}
- Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:
sm— для экранов small и больше.md— для экранов medium и больше.lg— для экранов large и больше.xl— для экранов extra large и больше.- Модификатор. Обязательный параметр.
float-right— элемент «плавает» справа.float-left— элемент «плавает» слева.float-none— элемент не «плавает».
Примеры
float-right
С помощью модификатора
float-right
элемент «плавает» справа.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla.
<img class="float-right ... ">
<p>Lorem ipsum dolor ... </p>
float-left
С помощью модификатора
float-left
элемент «плавает» слева.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla.
<img class="float-left ... ">
<p>Lorem ipsum dolor ... </p>
float-none
С помощью модификатора
float-none
элемент не «плавает».
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla.
<img class="float-none ... ">
<p>Lorem ipsum dolor ... </p>
Адаптивность
Для управления расположением контента вокруг элемента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm,
md,
lg,
xl
) через двоеточие (:) к модификатору.
Например, воспользуйтесь модификатором
md:float-right
для размещения элемента справа для экранов размером Medium и больше.
<div class="md:float-right"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.