浮動（Float）

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

On this page

概述

這些通用類別使用CSS float屬性基于目前的視窗大小而向左、向右或禁用浮動。并包含了！important以避免權(quán)重問題。float使用與網(wǎng)格系統(tǒng)相同的屏幕斷點。請注意，浮動（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.

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