Паплавок

Перамыкайце float на любым элеменце, праз любую кропку перапынку, выкарыстоўваючы нашы спагадныя ўтыліты float.

На гэтай старонцы

Агляд

Гэтыя службовыя класы перамяшчаюць элемент злева або справа або адключаюць перасоўванне ў залежнасці ад бягучага памеру вокны прагляду з дапамогай уласцівасці CSSfloat . !importantуключаны, каб пазбегнуць праблем са спецыфікай. Яны выкарыстоўваюць тыя ж кропкі разрыву акна прагляду, што і наша сістэма сеткі. Майце на ўвазе, што ўтыліты float не ўплываюць на гнуткія элементы.

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

Плаваючы канец на ўсіх памерах прагляду

Не плавайце на ўсіх памерах акна прагляду

<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 (вельмі вялікі) або шырэй

<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,
      )
    ),