Bootstrap 5.3移动端垂直侧边栏折叠为汉堡菜单问题求助

方案一：复用侧边栏代码实现折叠（无重复代码） #

利用Bootstrap内置的collapse组件，配合响应式类控制汉堡按钮和侧边栏的显示隐藏，无需重复编写侧边栏内容。

HTML结构 #

<!-- 汉堡触发按钮（仅中等屏幕以下显示） -->
<button class="btn btn-light d-md-none position-fixed top-0 start-0 m-3" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContainer">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- 侧边栏容器（中等屏幕以上默认展开，以下可折叠） -->
<div class="collapse d-md-block" id="sidebarContainer">
  <div class="bg-light sidebar p-3">
    <ul class="nav flex-column">
      <li class="nav-item mb-2">
        <a class="nav-link active" href="#">首页</a>
      </li>
      <li class="nav-item mb-2">
        <a class="nav-link" href="#">项目管理</a>
      </li>
      <li class="nav-item mb-2">
        <a class="nav-link" href="#">账户设置</a>
      </li>
      <li class="nav-item mb-2">
        <a class="nav-link" href="#">帮助中心</a>
      </li>
    </ul>
  </div>
</div>

<!-- 主内容区域 -->
<div class="main-content p-4">
  <!-- 页面内容 -->
</div>

自定义CSS适配布局 #

/* 中等屏幕及以上：固定侧边栏宽度，主内容区偏移 */
@media (min-width: 768px) {
  .sidebar {
    width: 240px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
  }
  .main-content {
    margin-left: 240px;
  }
}

/* 中等屏幕以下：侧边栏占满宽度，主内容区无偏移 */
@media (max-width: 767.98px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 56px; /* 避开固定的汉堡按钮 */
  }
  .main-content {
    margin-left: 0;
    margin-top: 1rem;
  }
}

方案二：改用官方Navbar适配侧边栏场景 #

将侧边栏内容整合到Bootstrap官方Navbar组件中，通过媒体查询调整布局，在中等屏幕以上显示为垂直侧边栏，以下折叠为汉堡菜单，复用官方组件的交互逻辑。

HTML结构 #

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <div class="container-fluid">
    <!-- 汉堡触发按钮 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSidebar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 侧边栏内容（Navbar折叠容器） -->
    <div class="collapse navbar-collapse" id="navbarSidebar">
      <ul class="nav flex-md-column flex-row w-100">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">项目管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">账户设置</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">帮助中心</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content p-4">
  <!-- 页面内容 -->
</div>

自定义CSS调整布局 #

/* 中等屏幕及以上：将Navbar转为固定垂直侧边栏 */
@media (min-width: 768px) {
  #navbarSidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    overflow-y: auto;
    background-color: #f8f9fa;
    padding: 1.5rem;
  }
  .main-content {
    margin-left: 240px;
  }
  /* 强制中等屏幕以上Navbar保持展开状态 */
  #navbarSidebar.collapse {
    display: block !important;
  }
  /* 隐藏中等屏幕以上的汉堡按钮 */
  .navbar-toggler {
    display: none;
  }
}

/* 中等屏幕以下：默认折叠Navbar，主内容区无偏移 */
@media (max-width: 767.98px) {
  .main-content {
    margin-left: 0;
    margin-top: 1rem;
  }
}

关键说明 #

• 两种方案均无需重复编写侧边栏代码，仅通过CSS和Bootstrap内置组件实现响应式切换
• 方案一保留原垂直侧边栏结构，仅添加折叠触发逻辑；方案二完全复用Navbar组件，减少自定义JS需求
• 可根据现有代码结构选择适配性更强的方案，若原侧边栏逻辑复杂，优先选方案一；若希望贴合官方组件规范，优先选方案二

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