Source

ngambang

Toggle floats ing unsur apa wae, ing sembarang breakpoint, nggunakake utilitas float responsif.

Ringkesan

Kelas utilitas iki ngambang unsur ing sisih kiwa utawa tengen, utawa mateni floating, adhedhasar ukuran viewport saiki nggunakake properti CSSfloat . !importantkalebu kanggo ngindhari masalah spesifik. Iki nggunakake breakpoints viewport padha karo sistem kothak kita. Wigati dimangerteni yen utilitas float ora mengaruhi barang fleksibel.

kelas

Ganti float karo kelas:

Ngambang ngiwa ing kabeh ukuran viewport

Ngambang tengen ing kabeh ukuran viewport

Aja ngambang ing kabeh ukuran viewport 
<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>

Campuran

Utawa dening Sass mixin:

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

Responsif

Variasi responsif uga ana kanggo saben floatnilai.

Ngambang ngiwa ing viewports ukuran SM (cilik) utawa luwih amba

Ngambang ngiwa ing viewports ukuran MD (sedheng) utawa luwih amba

Ngambang ngiwa ing viewport ukuran LG (gedhe) utawa luwih amba

Ngambang ngiwa ing viewports ukuran XL (ekstra-gedhe) utawa luwih amba 

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

Kene kabeh kelas dhukungan;

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