Source

Nɔ tsi dzi

Toggle floats le element ɖesiaɖe dzi, le breakpoint ɖesiaɖe dzi, to míaƒe float utilities siwo ɖoa nya ŋu la zazã me.

Kpɔɖeŋunyagbɔgblɔ

Dɔwɔnu ƒe hatsotso siawo tsɔa nu aɖe ƒua gbe ɖe miame alo ɖusime, alo tsia tsia dzi, le nukpɔkpɔ ƒe lolome si li fifia nu to CSS floatƒe nɔnɔme zazã me . !importantwotsɔ de eme be woaƒo asa na nya siwo ku ɖe nya aɖewo koŋ ŋu. Esiawo zãa viewport breakpoints mawo ke abe míaƒe grid system ene. Taflatse nyae be float utilities mekpɔa ŋusẽ aɖeke ɖe flex nuawo dzi o.

Klasswo me

Trɔ float aɖe kple klass aɖe:

Float miame le viewport ƒe lolomewo katã dzi

Float ɖusime le viewport ƒe lolomewo katã dzi

Mègaƒu tsi le nukpɔkpɔ ƒe lolomewo katã dzi o 
<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>

Nusiwo wotsɔ tsakae

Alo Sass mixin ye wɔe be:

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

Nyaŋuɖoɖo

Vovototo siwo ɖoa nya ŋu hã li na floatasixɔxɔ ɖesiaɖe.

Tsi dzi le miame le nukpɔkpɔmɔ̃ siwo ƒe lolome nye SM (sue) alo esiwo keke wu la dzi

Tsi ɖe miame le nukpɔkpɔƒe siwo ƒe lolome nye MD (medium) alo esi keke wu la dzi

Tsi miame le nukpɔkpɔmɔ̃ siwo ƒe lolome nye LG (lolo) alo esiwo keke wu dzi

Tsi le miame le nukpɔkpɔƒe siwo ƒe lolome nye XL (lolo wu) alo esi keke wu la dzi 

<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>

Kpekpeɖeŋunana ƒe klassawo katãe nye esi;

  • .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