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

【问题标题】：Boostrap 5 Floating Columns split sidebar above and below main contentBootstrap 5 Floating Columns 在主要内容上方和下方拆分侧边栏
【发布时间】：2021-04-19 21:49:04
【问题描述】：

我还没有在 Bootstrap 5 中找到执行此操作的方法（以前的 stackoverflow 答案似乎都是针对较旧的 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 类做到这一点？

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

这是 possible in Bootstrap 4 在某些断点上“禁用”弹性框。

也可以在 Bootstrap 5 中以类似的方式完成。使用 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

【讨论】：