in English
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
. !important
ibandakanyiwe ukuphepha imiba ethile. Ezi zisebenzisa iindawo zokuqhawuka zembonakalo efanayo nenkqubo yethu yegridi. Nceda uqaphele izinto eziluncedo zokudada azinampembelelo kwizinto eziguqukayo.
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 float
kwixabiso 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