Source

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.

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.

Titlilasi

Toggle float na tlilasi:

Papamala eximatsini eka tisayizi hinkwato ta viewport

Papamala kunene eka tisayizi hinkwato ta viewport

U nga papamalali eka tisayizi hinkwato ta viewport 
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Ti- mixins

Kumbe hi Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Ku hlamula

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

Papamala eximatsini eka swivono leswi nga ni sayizi ya SM (switsongo) kumbe ku tlula

Papamala eximatsini eka swivono leswi nga ni sayizi ya MD (ya le xikarhi) kumbe ku tlula

Float left eka ti viewports ta sayizi ya LG (leyikulu) kumbe ku anama

Papamala eximatsini eka swivono leswi nga ni sayizi ya XL (leyikulu swinene) kumbe ku tlula 

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

Hi leti titlilasi hinkwato ta nseketelo;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none