Source

Ngambang

Togél ngambang dina unsur naon waé, dina titik putus mana waé, nganggo utilitas float responsif kami.

Ihtisar

Kelas utiliti ieu ngambang hiji unsur ka kénca atawa ka katuhu, atawa nganonaktipkeun floating, dumasar kana ukuran viewport ayeuna ngagunakeun sipat CSSfloat . !importantkaasup pikeun ngahindarkeun masalah spésifisitas. Ieu nganggo titik putus viewport anu sami sareng sistem grid urang. Punten émut yén utilitas float henteu mangaruhan kana barang anu fleksibel.

Kelas

Togél ngambang sareng kelas:

Ngambang ditinggalkeun dina sagala ukuran viewport

Ngambang katuhu dina sagala ukuran viewport

Ulah ngambang dina sagala 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

Atawa ku Sass mixin:

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

Responsif

Variasi responsif ogé aya pikeun tiap floatnilai.

Ngambang ditinggalkeun dina viewports ukuran SM (leutik) atawa leuwih lega

Ngambang ditinggalkeun dina viewports ukuran MD (sedeng) atawa leuwih lega

Ngambang ditinggalkeun dina viewports ukuran LG (badag) atawa leuwih lega

Ngambang ditinggalkeun dina viewports ukuran XL (ekstra-ageung) atawa leuwih lega

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

Ieu sadayana kelas dukungan;

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