Float浮动属性

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

概览

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

Class样式

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

在所有 viewport 窗口上浮动在左侧

在所有viewport 窗口上浮动到右侧

所有viewport 窗口都不浮动
<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-* 的响应式属性规范:

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>

这是所有子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