如何使用 Bootstrap 5 创建左右固定侧边栏

Question

在一个Bootstrap 5的标记结构中，你能用2个<nav>元素创建一个左右固定的侧边栏，内容在中间吗？像这样：

<nav>
  <div>left sidebar</div>
</nav>
<main>
  <div>main content</div>
</main>
<nav>
  <div>right sidebar</div>
</nav>

基本的 bootstrap5 类看起来如何 like/css 才能使这项工作正常进行？

Answer 1

您是否正在寻找这样的东西：

<div class="d-flex">
    <div>left item, put me some width</div>
    <div class="flex-fill">content item, will fill remaining</div>
    <div>right item, put me some width</div>
</div>

正如你所说，边栏是固定的（你需要把它们放在一些有宽度的class中），中间的会扩展以填充父

的剩余宽度

Answer 2

Bootstrap 使用 12 列 grid-system。一种方法是将这些 grid-column 值分配到单行中您喜欢的任何值（我在本演示中使用 2 - 8 - 2）

然后您可以在每个 nav 内的嵌套元素上使用 position: sticky 和您的首选定位值。这样，当滚动浏览主要内容时，内容会粘在屏幕上。

/* ----- Resetting styling/demo purpose ----- */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper.row {
  flex-wrap: nowrap;
  margin: 0;
}

.wrapper.row>* {
  padding: 0;
  text-align: center;
}

/* ----- end ----- */

.col-md-2 {
  background-color: tomato;
}

.col-md-2 div {
  position: sticky;
  top: 0;
}

.col-md-8 {
  background-color: limegreen;
  height: 175vh;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="wrapper row">
  <nav class="col-md-2">
    <div>left sidebar</div>
  </nav>
  <main class="col-md-8">
    <div>main content</div>
  </main>
  <nav class="col-md-2">
    <div>right sidebar</div>
  </nav>
</div>

如何使用 Bootstrap 5 创建左右固定侧边栏

How to create left and right fixed sidebar with Bootstrap 5

html

css

twitter-bootstrap

bootstrap-5