浮动

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

内容提要

概述

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

实用程序 API

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

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