Float

Toggle floats fuq kwalunkwe element, fuq kwalunkwe breakpoint, billi tuża l-utilitajiet float reattivi tagħna.

Fuq din il-paġna

Ħarsa ġenerali

Dawn il-klassijiet ta' utilità jgħollu element lejn ix-xellug jew il-lemin, jew jiskonnettjaw il-floating, abbażi tad-daqs attwali tal-viewport billi tuża l- proprjetà CSSfloat . !importanthija inkluża biex jiġu evitati kwistjonijiet ta' speċifiċità. Dawn jużaw l-istess punti ta' waqfien tal-vista bħas-sistema tal-grilja tagħna. Jekk jogħġbok kun af li l-utilitajiet float m'għandhom l-ebda effett fuq oġġetti flex.

Float start fuq id-daqsijiet kollha tal-viewport

Tarf float fuq id-daqsijiet kollha tal-viewport

Tpoġġix f'wiċċ l-ilma fuq id-daqsijiet kollha tal-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>

Jirrispondi

Jeżistu wkoll varjazzjonijiet li jirrispondu għal kull floatvalur.

Float start fuq viewports ta' daqs SM (żgħir) jew usa'

Float start fuq viewports ta 'daqs MD (medju) jew usa'

Float start fuq viewports daqs LG (kbar) jew usa

Bidu float fuq viewports ta' daqs XL (extra-kbar) jew usa'

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>

Hawn huma l-klassijiet kollha ta’ appoġġ:

.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

Utilitajiet API

L-utilitajiet float huma ddikjarati fl-API tal-utilitajiet tagħna f' scss/_utilities.scss. Tgħallem kif tuża l-API tal-utilitajiet.

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