Source

Kureremba

Toggle ireremba hejuru yikintu icyo aricyo cyose, hejuru yikintu icyo ari cyo cyose, ukoresheje ibikorwa byacu bireremba.

Incamake

Aya masomo yingirakamaro areremba ikintu ibumoso cyangwa iburyo, cyangwa guhagarika kureremba, ukurikije ubunini bwa none bwo kureba ukoresheje umutungo wa CSSfloat . !importantirimo kugirango wirinde ibibazo byihariye. Ibi bikoresha ibice bimwe byo kureba nka sisitemu ya gride. Nyamuneka umenye ko ibikorwa byo kureremba bidafite ingaruka kubintu byoroshye.

Amasomo

Kuzenguruka kureremba hamwe nishuri:

Ubwato busigaye hejuru yubunini bwose

Kureremba neza hejuru yubunini bwose

Ntureremba hejuru yubunini bwose
<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>

Imvange

Cyangwa na Sass mixin:

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

Igisubizo

Guhindura ibisubizo nabyo birahari kuri buri floatgaciro.

Ubwato busigaye kubireba bingana na SM (nto) cyangwa mugari

Ubwato busigaye kubireba ubunini bwa MD (hagati) cyangwa mugari

Ubwato busigaye kubireba ubunini bwa LG (bunini) cyangwa bugari

Ubwato busigaye kubireba ubunini bwa XL (birenze-binini) cyangwa mugari

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

Dore ibyiciro byose byingoboka;

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