Ukudada

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

Kweli phepha

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. Nceda uqaphele izinto eziluncedo zokudada azinampembelelo kwizinto eziguqukayo.

Isiqalo sokudada kuzo zonke iisayizi zokujonga

Isiphelo sokudada kubo bonke ubungakanani bendawo yokujonga

Sukudada kuzo zonke iisayizi zezibuko

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Ukusabela

Iiyantlukwano eziphendulayo zikwakhona floatkwixabiso ngalinye.

Isiqalo sokudada kwizibuko zokujonga ezinobungakanani be-SM (encinci) okanye banzi

Isiqalo sokudada kwizibuko zokujonga ubukhulu be-MD (phakathi) okanye banzi

Isiqalo sokudada kwindawo yokujonga isayizi ye-LG (enkulu) okanye ebanzi

Isiqalo sokudada kwizibuko zokujonga ezinobungakanani beXL (enkulu kakhulu) okanye banzi

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Nazi zonke iiklasi zenkxaso:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

Utilities API

Izinto eziluncedo zokudada zibhengezwa kwizinto eziluncedo zethu kwi-API kwi scss/_utilities.scss. Funda indlela yokusebenzisa izinto eziluncedo API.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),