Пловак

Пребаците флоат на било који елемент, преко било које тачке прекида, користећи наше услужне програме за плутање.

На овој страници

Преглед

Ове услужне класе померају елемент лево или десно, или онемогућавају плутање, на основу тренутне величине оквира за приказ користећи ЦСС floatсвојство . !importantје укључен да би се избегла питања специфичности. Они користе исте тачке прелома у области приказа као и наш систем мреже. Имајте на уму да флоат услужни програми немају утицаја на флек ставке.

Флоат старт на свим величинама оквира за приказ

Плутајући крај на свим величинама оквира за приказ

Немојте лебдети на свим величинама прозора

<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За сваку вредност постоје и варијације које одговарају .

Флоат почетак на прозорима величине СМ (мали) или шири

Флоат почетак на прозорима величине МД (средњи) или шири

Плутајући почетак на прозорима величине ЛГ (велики) или ширим

Плутајући почетак на прозорима величине КСЛ (екстра-велики) или шири

<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

Сасс

Утилитиес АПИ

Флоат услужни програми су декларисани у нашем АПИ-ју услужних програма у scss/_utilities.scss. Научите како да користите услужни АПИ.

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