Source

Phallana

Fetolela ho phaphamala holim'a ntho efe kapa efe, ho pholletsa le sebaka sefe kapa sefe, u sebelisa lisebelisoa tsa rona tse arabelang.

Kakaretso

Lihlopha tsena tsa lisebelisoa li phaphametse ntho e ka letsohong le letšehali kapa ka ho le letona, kapa e tima ho phaphamala, ho ipapisitsoe le boholo ba sebaka sa ho shebella ha joale u sebelisa thepa ea CSSfloat . !importante kenyelelitsoe ho qoba litaba tse khethehileng. Tsena li sebelisa likheo tsa pono tse tšoanang le sistimi ea rona ea grid. Ka kopo hlokomela hore lisebelisoa tsa float ha li ame lintho tse feto-fetohang.

Lihlopha

Fetolela float ka sehlopha:

Khopha ka ho le letšehali ho saese tsohle tsa sebaka sa pono

Khopha ka ho le letona ho li-saese tsohle tsa sebaka sa pono

Se ke oa phaphamala ka boholo ba lipoho tsa pono 
<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>

Metsoako

Kapa ka Sass mixin:

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

Ea arabelang

Liphetoho tse arabelang li boetse li teng bakeng sa floatboleng bo bong le bo bong.

Phaphalle ka ho le letšehali ho liema-ports tsa boholo ba SM (tse nyane) kapa ho feta

Sela ka ho le letšehali ho liema-ports tsa boholo ba MD (bohareng) kapa ho feta

Sekama ka letsohong le letšehali ho liema-ports tsa boholo ba LG (tse kholo) kapa ho feta

Phaphalle ka letsohong le letšehali ho liema-ports tsa boholo ba XL (tse kholo haholo) kapa ho feta 

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

Mona ke lihlopha tsohle tsa tšehetso;

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