Source

Flosilo

Ŝanĝu flosiloj sur iu ajn elemento, trans ajna rompopunkto, uzante niajn respondemajn flosilajn utilecojn.

Superrigardo

Ĉi tiuj utilaj klasoj flosas elementon maldekstren aŭ dekstren, aŭ malŝaltas flosadon, surbaze de la nuna vidfenestrograndeco uzante la CSS- floatposedaĵon . !importantestas inkluzivita por eviti specifecajn problemojn. Ĉi tiuj uzas la samajn vidpunktojn kiel nia kradsistemo. Bonvolu konscii, ke flosaj utilecoj ne efikas sur flekseblaj eroj.

Klasoj

Ŝaltu flosilon kun klaso:

Flosu maldekstren sur ĉiuj grandecoj de vidpunkto

Flosu ĝuste sur ĉiuj grandecoj de vidpunkto

Ne flosu sur ĉiuj grandecoj de vidpunkto 
<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>

Miksinoj

Aŭ per Sass mixin:

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

Respondema

Respondema varioj ankaŭ ekzistas por ĉiu floatvaloro.

Flosu maldekstre sur vidfenestroj grandeco SM (malgranda) aŭ pli larĝa

Flosu maldekstre sur vidfenestroj grandeco MD (meza) aŭ pli larĝa

Flosu maldekstre sur vidfenestroj grandeco LG (granda) aŭ pli larĝa

Flosu maldekstre sur vidfenestroj grandeco XL (ekstregranda) aŭ pli larĝa 

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

Jen ĉiuj subtenaj klasoj;

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