浮动

使用我们的响应式浮点实用程序，跨任何断点在任何元素上切换浮点数。

当前页

概述

这些实用程序类使用 CSS float 属性根据当前视口大小向左或向右浮动元素，或禁用浮动。包含 !important以避免特异性问题。它们使用与我们的网格系统相同的视口断点。请注意，浮动实用程序对弹性项目没有影响。

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

html

<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

html

<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

实用程序 API

浮点实用程序在我们的实用程序 API 中的scss/_utilities.scss中声明。了解如何使用实用程序 API。

scss/_utilities.scss

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