浮动(float)

使用我们的响应式浮动工具,可以在任何断点上切换浮动任何元素。

概览

这些工具向左或向右浮动元素,可以根据当前 viewport 大小禁用浮动 CSS float 。增加属性 !important 可以以避免例外情况。 它们使用与我们的网格系统相同的 viewport 断点。 请注意,浮动工具对 flex 没有影响。

用类切换浮动属性:

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Mixins

或者通过Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

响应

每种情况也存在反应性变化float 值。

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

以下是所有支持类: