Flote

Aktivite flote sou nenpòt eleman, atravè nenpòt ki pwen rupture, lè l sèvi avèk sèvis piblik flote reponn nou yo.

Nan paj sa a

Apèsi sou lekòl la

Klas sèvis piblik sa yo flote yon eleman a goch oswa adwat, oswa enfim k ap flote, baze sou gwosè pòtay aktyèl la lè l sèvi avèk pwopriyete CSSfloat la . !importantenkli pou evite pwoblèm espesifik. Sa yo sèvi ak menm pwen rupture viewport kòm sistèm kadriyaj nou an. Tanpri sonje sèvis piblik flote pa gen okenn efè sou atik flex.

Flote kòmanse sou tout gwosè viewport

Flote fen sou tout gwosè viewport

Pa flote sou tout gwosè viewport

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>

Reponn

Varyasyon repons egziste tou pou chak floatvalè.

Flote kòmanse sou vi ki gwosè SM (ti) oswa pi laj

Flote kòmanse sou vi ki gwosè MD (mwayen) oswa pi laj

Flote kòmanse sou pòtay gwosè LG (gwo) oswa pi laj

Flote kòmanse sou fenèt ki gwosè XL (siplemantè) oswa pi laj

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>

Men tout klas sipò yo:

.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

Sass

Itilite API

Yo deklare sèvis piblik flote nan API sèvis piblik nou an nan scss/_utilities.scss. Aprann kijan pou itilize API sèvis piblik yo.

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