Kuyandama

Sinthani zoyandama pachinthu chilichonse, kudutsa malo aliwonse, pogwiritsa ntchito zida zathu zoyankhidwa.

Patsamba ili

Mwachidule

Maphunziro ofunikirawa amayandama chinthu kumanzere kapena kumanja, kapena kuletsa zoyandama, kutengera kukula kwa malo owonera pogwiritsa ntchito CSS floatkatundu . !importantimaphatikizidwa kuti tipewe zovuta zenizeni. Izi zimagwiritsa ntchito mawonekedwe omwewo monga ma grid system yathu. Chonde dziwani kuti zida zoyandama sizikhudza zinthu zosinthika.

Kuyandama kumayambira pamitundu yonse yowonera

Mapeto oyandama pamasaizi onse owonera

Osayandama pamiyeso yonse yowonera

html

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

Womvera

Kusiyanasiyana koyankhira kulinso floatpamtengo uliwonse.

Kuyandama kumayambira pamabwalo owonera kakulidwe ka SM (yaing'ono) kapena kukulirapo

Kuyandama kumayambira pamawonekedwe kakulidwe ka MD (yapakati) kapena kukulirapo

Kuyandama kumayambira pamawonekedwe a LG (yayikulu) kapena kupitilira apo

Kuyandama kumayambira pazithunzi zazikulu za XL (zokulirapo) kapena kukulirapo

html

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

Nawa magulu onse othandizira:

.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

Zida zoyandama zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito API.

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