Mine põhisisu juurde Jätke dokumentide navigeerimise juurde

Lülitage hõljukid mis tahes elemendil, mis tahes katkestuspunktis, kasutades meie reageerivaid hõljukutiliite.

Ülevaade

Need utiliidiklassid ujutavad elemendi vasakule või paremale või keelavad ujumise, võttes aluseks praeguse vaateava suuruse, kasutades CSS -i floatatribuuti . !importanton lisatud spetsiifilisuse probleemide vältimiseks. Need kasutavad samu vaateava murdepunkte kui meie ruudustikusüsteem. Pange tähele, et ujuki utiliidid ei mõjuta painduvaid esemeid.

Float start kõikidel vaateava suurustel

Ujuv ots kõikidel vaateava suurustel

Ärge hõljuge kõigis vaateava suurustes
<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>

Vastutulelik

floatIga väärtuse jaoks on olemas ka reageerivad variatsioonid .

Ujuv algus SM (väike) või laiemate vaateavade puhul

Ujuv algus MD (keskmise) või laiemate vaateavade puhul

Float start LG (suur) või laiemate vaateavade puhul

Ujuv algus XL (eriti suur) või laiematel vaateavadel

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

Siin on kõik tugiklassid:

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

Utiliidide API

Float-utiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

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