在GitHub上查看

Float 浮动属性

使用响应式浮点实用工具可以在任何元素上切换浮点数,实现跨越任何断点。

本页导航↓

概述

这些实用工具将元素浮动到左边或右边,或者禁用浮动,基于使用 CSS float 属性 的当前视口大小。!important 是为了避免特定的问题。它们使用与我们的网格系统相同的视口断点。请注意浮动实用工具对伸缩项没有影响。

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