如何用Bootstrap实现可折叠侧边栏（含页面自适应与箭头切换）

实现方案 #

结合Bootstrap的flex布局、自定义CSS类和简单JS逻辑，就能实现你要的侧边栏折叠/展开、内容区自适应、箭头翻转效果，具体代码如下：

1. HTML结构 #

<div class="container-fluid p-0">
  <div class="d-flex">
    <!-- 可折叠侧边栏 -->
    <div id="sidebar" class="bg-dark text-white min-vh-100 w-25">
      <div class="p-3 d-flex justify-content-between align-items-center">
        <h5>侧边栏标题</h5>
        <button id="toggleSidebar" class="btn btn-light btn-sm">
          <i class="bi bi-chevron-left"></i>
        </button>
      </div>
      <!-- 侧边栏菜单 -->
      <ul class="nav flex-column p-3">
        <li class="nav-item mb-2"><a href="#" class="nav-link text-white"><span>菜单项1</span></a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link text-white"><span>菜单项2</span></a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link text-white"><span>菜单项3</span></a></li>
      </ul>
    </div>
    <!-- 主内容区 -->
    <main id="mainContent" class="flex-grow-1 p-4 bg-light">
      <h1>主内容区域</h1>
      <p>侧边栏折叠时，此区域自动填充全屏宽度</p>
    </main>
  </div>
</div>

• 用d-flex实现侧边栏和主内容区的横向排列，flex-grow-1让主内容区自动占据剩余空间
• min-vh-100保证侧边栏铺满视口高度

2. 自定义CSS #

/* 折叠状态下的侧边栏宽度 */
#sidebar.collapsed {
  width: 60px;
}

/* 折叠时隐藏文字内容 */
#sidebar.collapsed h5,
#sidebar.collapsed .nav-link span {
  display: none;
}

/* 箭头翻转效果 */
#toggleSidebar.collapsed i {
  transform: rotate(180deg);
}

/* 添加平滑过渡动画 */
#sidebar, #toggleSidebar i {
  transition: all 0.3s ease-in-out;
}

• 通过collapsed类控制侧边栏的两种状态
• 过渡动画让切换过程更流畅

3. JS交互逻辑 #

const toggleBtn = document.getElementById('toggleSidebar');
const sidebar = document.getElementById('sidebar');

toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('collapsed');
  toggleBtn.classList.toggle('collapsed');
});

• 点击按钮时切换collapsed类，触发样式变化

注意事项 #

• 示例使用了Bootstrap Icons的图标，你可以替换成符合Figma设计的图标或纯文本箭头
• 可根据需求调整侧边栏的初始状态（默认折叠的话，给#sidebar和#toggleSidebar加上collapsed类即可）
• 侧边栏的颜色、宽度、边距等样式可直接修改CSS适配你的设计

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