Terapung

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

Pada halaman ini

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.

Permulaan terapung pada semua saiz port pandangan

Hujung terapung pada semua saiz port pandangan

Jangan terapung pada semua saiz port pandangan

html

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Responsif

Variasi responsif juga wujud untuk setiap floatnilai.

Permulaan terapung pada viewport bersaiz SM (kecil) atau lebih luas

Permulaan terapung pada viewport bersaiz MD (sederhana) atau lebih luas

Permulaan terapung pada viewport bersaiz LG (besar) atau lebih luas

Permulaan terapung pada port pandangan bersaiz XL (lebih besar) atau lebih luas

html

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Berikut ialah semua kelas sokongan:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

API Utiliti

Utiliti terapung diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),