Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Kellua

Vaihtele kellukkeita missä tahansa elementissä missä tahansa keskeytyspisteessä käyttämällä reagoivia kelluvia apuohjelmia.

Tällä sivulla

Yleiskatsaus

Nämä hyödyllisyysluokat kelluttavat elementin vasemmalle tai oikealle tai poistavat kellumisen käytöstä nykyisen näkymän koon perusteella käyttämällä CSS - floatominaisuutta . !importanton mukana erityisongelmien välttämiseksi. Nämä käyttävät samoja katseluikkunoiden keskeytyspisteitä kuin ruudukkojärjestelmämme. Huomaa, että float-apuohjelmat eivät vaikuta joustaviin tuotteisiin.

Float-aloitus kaikissa näkymäkokoissa

Kelluva pää kaikissa näkymäkokoissa

Älä kellu kaikissa näkymäkokoissa
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>

Responsiivinen

floatJokaiselle arvolle on myös reagoivia muunnelmia .

Kelluntaaloitus SM (pieni) tai sitä leveämmistä kuvaporteista

Float-aloitus MD (keskikoko) tai sitä leveämmistä katseluporteista

Float-aloitus LG:n (suuri) tai leveämmille kuvaporteille

Float-aloitus XL-koon (erittäin iso) tai leveämmistä kuvaporteista

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>

Tässä ovat kaikki tukiluokat:

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

Float-apuohjelmat on ilmoitettu utilities API:ssa scss/_utilities.scss. Opi käyttämään apuohjelmien sovellusliittymää.

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