Float浮动属性
Bootstrap中的浮动属性(bootstrapFloat)可用于网站建设、网页设计、网站开发、小程序、独立站和跨境电商等领域,它能够帮助开发者创建响应式布局和排版,实现页面元素自适应并能在不同设备上进行适配,提高用户体验和界面美观度。同时,bootstrapFloat还可以通过简单的代码实现元素的对齐、间距调整等功能,提高开发效率和代码可维护性。

使用我们的响应式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

加入 DEVDIY 开发者社区

利用 DEVDIY 资源快速拓展您的业务
有兴趣与 DEVDIY 开发者合作吗?