浮动

浮动-Bootstrap 5和Material Design 2.0

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


基本例子

这些实用程序类根据以下元素将元素向左或向右浮动,或禁用浮动: 使用的当前视口大小 CSS float property. !important 包括在内以避免特殊性问题。这些使用相同的 视口断点作为我们的网格系统。请注意,浮动实用程序对 弹性项目。

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

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

反应灵敏

每个 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-start">Float left on viewports sized SM (small) or wider</div>
          <br />
          <div class="float-md-start">Float left on viewports sized MD (medium) or wider</div>
          <br />
          <div class="float-lg-start">Float left on viewports sized LG (large) or wider</div>
          <br />
          <div class="float-xl-start">Float left on viewports sized XL (extra-large) or wider</div>
          <br />
        

以下是所有支持类:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none