Skip to main content Skip to docs navigation
View on GitHub

浮動 (Float)

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

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去
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 通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

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