Source

Okuseeyeeya

Toggle floats ku element yonna, okuyita mu breakpoint yonna, nga okozesa responsive float utilities zaffe.

Okulaba okutwalira awamu

Ebika bino eby'omugaso bitengejja ekintu ku kkono oba ku ddyo, oba okulemesa okutengejja, okusinziira ku sayizi y'ekifo eky'okulaba ekiriwo kati nga tukozesa ekintu kya CSSfloat . !importantkiyingizibwamu okwewala ensonga ezikwata ku specificity. Bino bikozesa ebifo bye bimu eby’okumenya nga enkola yaffe eya grid. Nsaba omanye nti float utilities tezirina kye zikola ku bintu bya flex.

Ebisulo by’abayizi

Toggle float ne kiraasi:

Float ku kkono ku sayizi zonna ez'ekifo eky'okulaba

Tengejja ku ddyo ku sayizi zonna ez'ekifo eky'okulaba

Totengejja ku sayizi zonna ez'okulaba 
<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>

Ebirungo ebitabuddwa

Oba nga ya Sass mixin:

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

Okuddamu

Enjawulo eziddamu nazo ziriwo ku buli floatmuwendo.

Float left ku viewports eziriko sayizi ya SM (entono) oba okusingawo

Lengejja ku kkono ku viewports eziriko sayizi ya MD (medium) oba okusingawo

Float left ku viewports ezirina sayizi ya LG (ennene) oba okusingawo

Float left ku viewports size XL (extra-large) oba okusingawo 

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

Wano waliwo emisomo gyonna egy’obuyambi;

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