Float浮动属性

使用我们的响应式float浮动通用样式，能在任何设备断点（浏览器尺寸）上切换浮动。

概览

这些通用样式定义可定义元素浮动到左侧或右侧，或者 使用 CSS float 属性实现基于当前浏览器窗口禁用浮动。可引入!important 来避免特殊harck，这些属性都使用Bootstrap全局栅格相当的设备断点（屏幕规格定义）。

Class样式

使用class样式来切换float效果:

<div class="float-left">在所有 viewport 窗口上浮动在左侧</div><br>
<div class="float-right">在所有viewport 窗口上浮动到右侧</div><br>
<div class="float-none">所有viewport 窗口都不浮动</div>

Mixin引导

或者使用Sass mixin:

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

响应式可选参数

.float-* 的响应式属性规范：

<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>

这是所有子class类定义：

• .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