Поплавок

Перемикайте плаваючі значення на будь-якому елементі, через будь-яку точку зупину за допомогою наших адаптивних утиліт для плаваючих елементів.

На цій сторінці

Огляд

Ці службові класи переміщують елемент ліворуч або праворуч або вимикають переміщення залежно від поточного розміру вікна перегляду за допомогою властивості CSSfloat . !importantвключено, щоб уникнути проблем із специфічністю. Вони використовують ті самі контрольні точки вікна перегляду, що й наша сітка. Майте на увазі, що утиліти float не впливають на елементи Flex.

Плаваючий початок для всіх розмірів вікна перегляду

Плаваючий кінець для всіх розмірів вікна перегляду

Не плавайте на всіх розмірах вікна перегляду

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>

Чуйний

floatДля кожного значення також існують відповідні варіації .

Плаваючий початок у вікнах перегляду розміром SM (маленький) або більше

Плаваючий початок у вікнах перегляду розміром MD (середній) або ширший

Плаваючий початок у вікнах перегляду розміром LG (великий) або ширший

Плаваючий початок у вікнах перегляду розміром XL (дуже великий) або ширше

html

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

Сасс

API утиліт

Утиліти Float оголошені в нашому API утиліт у scss/_utilities.scss. Дізнайтеся, як використовувати API утиліт.

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