如何使用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文档,但我找不到一种简单的方法来实现这种布局.

Answer 1

2018年更新

这是最新的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 ://www.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>

另请参阅:
Bootstrap 4中的固定和可滚动列flexbox
Bootstrap col固定位置
如何使用CSS位置粘贴以使用Bootstrap 4保持侧边栏可见在Bootstrap 4中
创建响应式导航栏侧边栏"抽屉"？

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

Answer 3

我在我的代码中使用了这个：

<div class="sticky-top h-100">
    <nav id="sidebar" class="vh-100">
        ....

这会导致你的侧边栏高度变为 100% 并固定在顶部。