Source

Terapung

Togol terapung pada mana-mana elemen, merentasi mana-mana titik putus, menggunakan utiliti apungan responsif kami.

Gambaran keseluruhan

Kelas utiliti ini mengapungkan elemen ke kiri atau kanan, atau lumpuhkan terapung, berdasarkan saiz port pandang semasa menggunakan sifat CSSfloat . !importantdisertakan untuk mengelakkan isu kekhususan. Ini menggunakan titik putus viewport yang sama seperti sistem grid kami. Harap maklum bahawa utiliti apungan tidak mempunyai kesan ke atas item flex.

Kelas

Togol apungan dengan kelas:

Terapung ke kiri pada semua saiz port pandangan

Terapung terus pada semua saiz port pandangan

Jangan terapung pada semua saiz port pandangan 
<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 oleh Sass mixin:

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

Responsif

Variasi responsif juga wujud untuk setiap floatnilai.

Terapung ke kiri pada viewport bersaiz SM (kecil) atau lebih lebar

Terapung ke kiri pada viewport bersaiz MD (sederhana) atau lebih lebar

Terapung ke kiri pada port pandangan bersaiz LG (besar) atau lebih luas

Terapung ke kiri pada port pandangan bersaiz XL (lebih 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 ialah semua kelas sokongan;

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