使用我们的响应式浮点实用程序在任何元素上切换浮点。
概述
这些实用程序类使用 CSS float 属性根据当前视口大小向左或向右浮动元素，或禁用浮动。 包括在内以避免特异性问题。这些使用与我们的网格系统相同的视口断点。请注意，浮动实用程序对弹性项目没有影响。!important
在所有视口大小上浮动起始
所有视口大小的浮点端
不要在所有视口大小上浮动
<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 帮助程序清除浮点。
响应
每个值也存在响应式变体。float
在大小为 SM（小）或更宽的视口上浮动端
大小为 MD（中）或更宽的视口上的浮点端
大小为 LG（大）或更宽的视口上的浮动端
尺寸为 XL（超大）或更宽的视口上的浮动端
尺寸为 XXL（超大）或更宽的视口上的浮点端
<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 实用程序 API
浮点实用程序在我们的实用程序 API 中声明。了解如何使用实用工具 API。scss/_utilities.scss
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),