Source

Mengambang

Beralih float pada elemen apa pun, di semua breakpoint, menggunakan utilitas float responsif kami.

Ringkasan

Kelas utilitas ini mengapungkan elemen ke kiri atau kanan, atau menonaktifkan mengambang, berdasarkan ukuran area pandang saat ini menggunakan properti CSSfloat . !importantdisertakan untuk menghindari masalah kekhususan. Ini menggunakan breakpoint viewport yang sama dengan sistem grid kami. Perlu diketahui bahwa utilitas float tidak berpengaruh pada item fleksibel.

Kelas

Alihkan float dengan kelas:

Apung ke kiri di semua ukuran viewport

Mengambang tepat di semua ukuran viewport

Jangan mengapung di semua 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

Atau dengan campuran Sass:

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

Responsif

Variasi responsif juga ada untuk setiap floatnilai.

Apung ke kiri pada viewport berukuran SM (kecil) atau lebih lebar

Mengambang ke kiri pada viewports berukuran MD (medium) atau lebih lebar

Apung ke kiri di viewports berukuran LG (besar) atau lebih lebar

Apung ke kiri di viewports berukuran XL (ekstra-besar) atau lebih lebar 

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

Berikut adalah semua 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