Source

Поплавок

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

Огляд

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

Заняття

Перемкнути float з класом:

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

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

Не плавайте на всіх розмірах вікна перегляду
<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>

Міксини

Або від Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Чуйний

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