浮动

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

Overview

这些实用程序类使用[CSSfloat属性]根据当前视口的大小向左或向右浮动元素,或禁用浮动功能。 CSS float property.包含!important以避免特殊性问题。 它们使用与我们的网格系统相同的视口断点。 请注意,浮动实用程序对弹性项目没有影响。

Classes

Toggle a float with a class:

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

Or by Sass mixin:

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

Responsive

每个“ 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>

这是所有支持类;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none