Float

使用我们的响应式 float utilities，在任何断点上切换任何元素上的浮动。

On this page

概述

这些实用程序类使用CSSfloat属性根据当前视口大小将元素向左或向右浮动，或禁用浮动。 !important 包括在内以避免具体问题。这些使用与我们的网格系统相同的视口断点。请注意 float utilities 对 flex 项没有影响。

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>

在父元素上使用 clearfix helper 来清除浮动。

响应式

对于每个float值也存在响应式变化。

Float end on viewports sized SM (small) or wider

Float end on viewports sized MD (medium) or wider

Float end on viewports sized LG (large) or wider

Float end on viewports sized XL (extra large) or wider

Float end on viewports sized XXL (extra extra large) or wider

html

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra 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

CSS

Sass utilities API

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

scss/_utilities.scss

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