Mengambang

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

Di halaman ini

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.

Mulai mengambang di semua ukuran viewport

Float end pada semua ukuran viewport

Jangan mengapung di semua ukuran viewport

<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 ada untuk setiap floatnilai.

Float start pada viewport berukuran SM (kecil) atau lebih lebar

Mulai mengambang di area pandang berukuran MD (sedang) atau lebih lebar

Float start pada viewports berukuran LG (besar) atau lebih lebar

Float start pada viewports berukuran XL (ekstra-besar) atau lebih lebar

<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 adalah semua kelas dukungan:

.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

Kelancangan

API Utilitas

Utilitas float dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

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