Skip to main content Skip to docs navigation
View on GitHub

浮動 (Float)

使用我們響應式的 float 通用類別，在任何斷點上切換任何元素的浮動。

On this page

概觀

這些通用類別使用 CSS float 屬性基於目前的視窗大小而向左、向右或禁用浮動。並包含了 !important 以避免權重問題。float 使用與網格系統相同的螢幕斷點。請注意，浮動 (float) 通用類別對於使用 flex 的元件沒有影響。

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes
<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>

響應式

每個 float 值都有響應式的變化：

Float start on viewports sized SM (small) or wider

Float start on viewports sized MD (medium) or wider

Float start on viewports sized LG (large) or wider

Float start on viewports sized XL (extra-large) or wider

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

以下是所有支援的類別:

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

Utilities API

Float utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

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