Phaphamala

Toggle floats eka element yin’wana na yin’wana, ku tsemakanya breakpoint yin’wana na yin’wana, hi ku tirhisa switirhisiwa swa hina swa float leswi hlamulaka.

Eka tluka leri

Nkatsakanyo

Titlilasi leti ta vukorhokeri ti papamala elemente ku ya eximatsini kumbe exineneni, kumbe ku tshikisa ku papamala, hi ku ya hi mpimo wa sweswi wa xivono hi ku tirhisa nhundzu ya CSSfloat . !importantyi katsiwile ku papalata timhaka ta ku kongoma. Leswi swi tirhisa swivandla swo hambana swa viewport leswi fanaka na sisiteme ya hina ya gridi. Hi kombela mi tiva leswaku switirhisiwa swa float a swi na vuyelo eka swilo swa flex.

Ku sungula ku papamala eka tisayizi hinkwato ta viewport

Float end eka tisayizi hinkwato ta viewport

U nga papamalali eka tisayizi hinkwato ta 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>

Ku hlamula

Ku hambana loku hlamulaka na kona ku kona eka floatntikelo wun’wana na wun’wana.

Ku sungula ka float eka swivono leswi nga na sayizi ya SM (leswitsongo) kumbe ku anama

Ku sungula ku papamala eka swivono leswi nga na sayizi ya MD (ya le xikarhi) kumbe ku anama

Float start eka ti viewports leti nga na sayizi ya LG (leyikulu) kumbe ku anama

Ku sungula ku papamala eka swivono leswi nga na sayizi ya XL (leyikulu swinene) kumbe ku anama

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>

Hi leti titlilasi hinkwato ta nseketelo:

.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

API ya switirhisiwa

Switirhisiwa swa float swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

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