浮动(Float)

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

在本页面

概述

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