Преминете към основното съдържание Преминете към навигацията с документи
Check
in English

Поплавък

Превключвайте float на всеки елемент, през всяка точка на прекъсване, като използвате нашите гъвкави помощни програми за float.

На тази страница

Преглед

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

Плаващо начало на всички размери на прозорците

Плаващ край на всички размери на прозорците

Не плавайте във всички размери на прозорците
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,
      )
    ),