如何用ng-bootstrap实现响应式侧边栏（大屏固定/小屏Offcanvas）

组件模板代码 (app.component.html) #

<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Admin Dashboard</a>
    <!-- 小屏幕下的侧边栏触发按钮 -->
    <button class="navbar-toggler d-md-none" type="button" (click)="openOffcanvas(sidebarOffcanvas)">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <!-- md及以上屏幕显示的固定侧边栏 -->
    <aside class="col-md-3 d-none d-md-block bg-light sidebar">
      <div class="position-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">
              Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Orders
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Products
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Customers
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
      </div>
      <!-- 这里放你的仪表盘内容 -->
      <p>主内容区域</p>
    </main>
  </div>
</div>

<!-- ng-bootstrap Offcanvas组件（小屏幕显示） -->
<ng-template #sidebarOffcanvas let-c="close">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Admin Menu</h5>
    <button type="button" class="btn-close" (click)="c('Close click')"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" href="#" (click)="c()">
          Dashboard
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" (click)="c()">
          Orders
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" (click)="c()">
          Products
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" (click)="c()">
          Customers
        </a>
      </li>
    </ul>
  </div>
</ng-template>

组件TS代码 (app.component.ts) #

import { Component, TemplateRef } from '@angular/core';
import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private offcanvasService: NgbOffcanvas) {}

  openOffcanvas(content: TemplateRef<any>) {
    this.offcanvasService.open(content, { position: 'start' });
  }
}

样式代码 (app.component.css) #

/* 固定侧边栏样式 */
.sidebar {
  height: calc(100vh - 56px); /* 减去导航栏高度 */
  overflow-y: auto;
}

/* 小屏幕下主内容适配 */
@media (max-width: 767.98px) {
  main {
    padding: 1rem;
  }
}

核心说明 #

• 无需Bootstrap JS：完全依赖ng-bootstrap的Offcanvas组件实现交互，仅用Bootstrap CSS类做响应式显示控制
• 内容复用优化：可以把侧边栏菜单抽成独立组件（比如app-sidebar-menu），在固定侧边栏和Offcanvas中统一引用，避免代码重复
• 响应式逻辑：通过d-md-none控制触发按钮仅在小屏幕显示，d-none d-md-block控制固定侧边栏仅在md及以上屏幕显示
• 交互细节：Offcanvas菜单点击链接时自动关闭，提升小屏幕用户体验

内容的提问来源于stack exchange，提问作者Felice Anastasio