Bootstrap 5 Floating Columns 在主要内容上方和下方拆分侧边栏

Question

我没有在 Bootstrap 5 中找到执行此操作的方法（以前的 Whosebug 答案似乎都是针对旧的 bootstrap 版本）。

我试图让我的主要内容在左边，边栏在右边。右侧的侧边栏包含 2 个部分，在响应式移动视图中，它们应该移动到主要内容的上方和下方：

查看 Bootstrap 5 个文档，您似乎应该能够将左列向左浮动，将右列向右浮动，如下所示：

<div class="row">
    <div class="col-md-8 ms-auto bg-info">
      Title
    </div>
    <div class="col-md-4 me-auto bg-success">
      Main Section
    </div>
    <div class="col-md-8 ms-auto bg-primary">
      Foot Notes
    </div>
  </div>

任何人都可以给我一个如何使用本机 Bootstrap 5 类执行此操作的工作示例吗？

Answer 1

这是通过在某些断点上“禁用”flexbox 实现的。

在Bootstrap5中也可以用类似的方法完成。使用 d-md-block 禁用 md 上的 flexbox（及更高版本）。然后在适当的列上使用浮动。在 md 下仍将使用 flexbox 并允许列自然排序和垂直堆叠。

   <div class="row d-md-block">
      <div class="col-md-8 ms-auto bg-info float-end"> Title </div>
      <div class="col-md-4 me-auto bg-success float-start">
            Main Section
      </div>
      <div class="col-md-8 ms-auto bg-primary"> Foot Notes </div>
   </div>

Demo

Bootstrap 5 Floating Columns 在主要内容上方和下方拆分侧边栏

Boostrap 5 Floating Columns split sidebar above and below main content

twitter-bootstrap

bootstrap-5