Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
Check
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.

Ezen az oldalon

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

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

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>

Í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,
      )
    ),