Source

Kellua

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

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.

Luokat

Vaihda kellunta luokan kanssa:

Kellu vasemmalle kaikissa näkymäkokoissa

Kellu suoraan kaikissa näkymän kokoluokissa

Älä kellu kaikissa näkymäkokoissa 
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Seokset

Tai Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Responsiivinen

floatJokaiselle arvolle on myös reagoivia muunnelmia .

Kellu vasemmalle kuvaporteissa, joiden koko on SM (pieni) tai leveämpi

Kellu vasemmalle kuvaporteissa, joiden koko on MD (medium) tai leveämpi

Kellu vasemmalle LG (suuri) tai sitä leveämmille kuvaporteille

Kellu vasemmalle XL-koon (erittäin iso) tai leveämmille kuvaporteille 

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

Tässä ovat kaikki tukiluokat;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none