Float布局

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

在此页

概述

这些实用程序类使用CSS float 属性根据当前视口大小将元素向左或向右浮动，或禁用浮动。包括!important在内以避免特异性问题。这些使用与我们的网格系统相同的viewport断点。请注意浮动实用程序对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>

响应式

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

实用程序接口

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

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