如何使用 Bootstrap 4 创建固定的侧边栏布局？

Question

我正在尝试使用 Bootstrap 4 创建类似于屏幕截图的布局，但在修复侧边栏并同时实现此布局时遇到了一些问题。

举一个基本的例子：

 <div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div>

可以获得这种布局，但是一旦我声明，事情就会变得棘手：

 .sidebar {
position: fixed // or absolute
}

一旦我使侧边栏变粘， 主 div 开始出现在侧边栏 后面 而不是旁边。当然，可以声明一些边距并将其推回原来的位置，但这会使响应变得复杂。

我觉得我错过了一些东西，我阅读了 Bootstrap 4 文档，但我找不到实现这种布局的简单方法。

原文由 cinnaroll45 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2020 年更新

这是最新 Bootstrap 4.0.0 的更新答案。这个版本有一些类可以帮助你创建一个 粘性 或 固定的侧边栏，而不需要额外的 CSS….

使用 sticky-top ：

 <div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

演示： https ://codeply.com/go/O9GMYBer4l

或者，使用 position-fixed ：

 <div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

演示： https ://codeply.com/p/0Co95QlZsH

另见：

Bootstrap 4 flexbox 中的固定和可滚动列

Bootstrap col 固定位置

如何使用 CSS 位置粘性保持侧边栏与 Bootstrap 4 可见

在 Bootstrap 4 中创建响应式导航栏侧边栏“抽屉”？

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

是这样的吗？

 #sticky-sidebar {
position:fixed;
max-width: 20%;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="col-xs-12" id="sticky-sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="col-xs-8" id="main">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div

原文由 GvM 发布，翻译遵循 CC BY-SA 3.0 许可协议