Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
in English

Úszó

Bármely elemen, bármilyen törésponton át lebegtetheti az úszót az érzékeny lebegő segédprogramok segítségével.

Áttekintés

Ezek a segédosztályok balra vagy jobbra lebegtetnek egy elemet, vagy letiltják a lebegést az aktuális nézetablakméret alapján a CSS floattulajdonság használatával . !importanttartalmazza a specifikus problémák elkerülése érdekében. Ezek ugyanazokat a nézetablak töréspontokat használják, mint a rácsrendszerünk. Kérjük, vegye figyelembe, hogy a float segédprogramok nincsenek hatással a rugalmas termékekre.

Lebegő indítás minden nézetablakméretnél

Úszóvég minden nézetablakban

Ne lebegjen minden nézetablakban
<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>

Fogékony

floatAz egyes értékekhez érzékeny variációk is léteznek .

Lebegő indítás SM (kicsi) vagy szélesebb méretű nézetablakokon

Lebegő indítás MD (közepes) vagy szélesebb méretű nézetablakokon

Lebegő indítás LG (nagy) vagy szélesebb méretű nézetablakokon

Lebegő indítás XL (extra nagy) vagy szélesebb méretű nézetablakokon

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

Íme az összes támogató osztály:

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

A lebegő segédprogramok a segédprogramok API-jában vannak deklarálva scss/_utilities.scss. Ismerje meg a segédprogramok API használatát.

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