Source

Ukudada

Guqula okudadayo kuyo nayiphi na into, kuyo nayiphi na indawo yokuphumla, usebenzisa izixhobo zethu eziphendulayo zokudada.

Isishwankathelo

Ezi ndidi zoncedo zidada into ekhohlo okanye ekunene, okanye khubaza ukudada okudadayo, ngokusekelwe kubungakanani bangoku bokubona usebenzisa ipropati yeCSSfloat . !importantibandakanyiwe ukuphepha imiba ethile. Ezi zisebenzisa iindawo zokuqhawuka zembonakalo efanayo nenkqubo yethu yegridi.

Iiklasi

Guqula ukudada ngeklasi:

Jikela ngasekhohlo kubo bonke ubungakanani bomboniso

Danda ekunene kubo bonke ubungakanani bendawo yokujonga

Sukudada kuzo zonke iisayizi zezibuko 
<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>

Imixube

Okanye nguSass mixin:

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

Ukusabela

Iiyantlukwano eziphendulayo zikwakhona floatkwixabiso ngalinye.

Danda ngasekhohlo kwizibuko zokujonga ezinobungakanani be-SM (encinci) okanye banzi

Jikela ngasekhohlo kwizibuko zokujonga ezinobungakanani MD (phakathi) okanye banzi

Jikela ngasekhohlo kwiindawo zokujonga ezinobungakanani be-LG (enkulu) okanye banzi

Danda ngasekhohlo kwizibuko zokujonga ezinobungakanani XL (ezongezelelweyo-ezinkulu) okanye banzi 

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

Nazi zonke iiklasi zenkxaso;

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