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

Úszó

Bármely elemen, bármely 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ézetablakban

Ú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

Float start 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ási 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 float 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,
      )
    ),