Source

Filotɛri

Toggle floats kan element o element, ka tɛmɛn breakpoint o breakpoint kan, ka baara kɛ ni an ka responsive float utilities ye.

Kuma bɛɛ lajɛlen

O nafalanw bɛ fɛn dɔ wuli ka taa kinin fɛ walima kinin fɛ, walima ka wulicogo bali, ka da sisan filɛlikɛyɔrɔ hakɛ kan ni CSS floatnafolo ye . !importantbɛ don a kɔnɔ walasa ka kɛrɛnkɛrɛnnenya koɲɛw bali. Olu bɛ baara Kɛ ni viewport breakpoints kelenw ye i n’a fɔ an ka grid system. Aw k’a dɔn ko float utilities tɛ nɔ bila flex fɛnw na.

Kalansow

Toggle float dɔ ni kalasi dɔ ye:

Float kinin fɛ viewport hakɛw bɛɛ kan

Float kinin fɛ viewport hakɛw bɛɛ kan

Aw kana panpan viewport hakɛw bɛɛ kan
<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>

Mixinw (Mixins).

Walima Sass mixin fɛ:

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

Jaabiw

Jaabi caman fana bɛ yen floatnafa kelen-kelen bɛɛ la.

Aw bɛ pan kinin fɛ filɛliyɔrɔw kan minnu bonya ye SM (misɛnnin) ye walima minnu ka bon

Aw bɛ pan kinin fɛ filɛlikɛyɔrɔw kan minnu bonya ye MD (cɛmancɛ) ye walima minnu ka bon

Aw bɛ pan kinin fɛ filɛlikɛyɔrɔw kan minnu bonya ye LG (ba) ye walima minnu ka bon

Aw bɛ pan kinin fɛ filɛlikɛyɔrɔw kan minnu bonya ye XL ye (extra-large) walima minnu ka bon

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

Dɛmɛ kalanw bɛɛ filɛ nin ye;

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