Source

Sabayn

Ku beddel sabbaynaya walxo kasta, meel kasta oo jaban, addoo isticmaalaya yutiilitooyinka sabaynta ee ka jawaabaya.

Dulmar

Fasaladan tasiilaadka waxa ay ku sabbeeyaan qayb bidix ama midig ah, ama demi sabaynta, iyada oo ku saleysan cabbirka daawashada ee hadda la isticmaalayo hantida CSSfloat . !importantwaxaa lagu daraa si looga fogaado arrimaha gaarka ah. Kuwaani waxay adeegsadaan isla goobihii goynta ee nidaamkayaga xariijimaha. Fadlan ka digtoonow in utility-yada sabbaynaya aanay wax saamayn ah ku yeelan alaabta dabacsan.

Fasallada

Ku beddel sabbayn fasal:

Sabbeyn bidix dhammaan cabbirrada daawashada

Si sax ah ugu sabbayso dhammaan cabbirrada daawashada

Ha ku sabbayn dhammaan cabbirrada daawashada 
<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>

Isku qas

Ama Sass mixin:

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

Ka jawaaba

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira floatqiimo kasta.

Sabbeyn bidix ee meelaha daawashada cabbirkoodu yahay SM (yar) ama ka ballaaran

Sabbeyn bidix ee meelaha daawashada cabbirkoodu yahay MD (dhexdhexaad) ama ka ballaaran

Sabbeyn bidix ee daawashada cabbirka LG (weyn) ama ka ballaaran

Sabbeyn bidix ee meelaha daawashada ee cabbirkoodu yahay XL (ka weyn) ama ka ballaaran 

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

Waa kuwan dhammaan fasallada taageerada;

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