Luncat ka eusi utama Luncat ka navigasi docs
in English

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 gaduh pangaruh kana barang-barang fleksibel.

Ngambang mimiti dina sagala ukuran viewport

Ngambang tungtung dina sagala ukuran viewport

Ulah ngambang dina sagala 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 ogé aya pikeun tiap floatnilai.

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

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

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

Ngambang mimiti dina viewports ukuran XL (ekstra-badag) atawa leuwih lega

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

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

Sass

Utiliti API

Utiliti ngambang dinyatakeun dina API Utiliti kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti API.

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