如何实现侧边栏切换时主体内容动态适配及响应式布局？

1. 页面结构重构（贴合Bootstrap 4规范） #

先调整HTML结构，把侧边栏、顶部导航、主内容区做清晰分层，利用Bootstrap的flex布局类搭建基础框架：

<!-- 顶部导航栏（fixed-top 固定顶部） -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <button class="navbar-toggler" type="button" id="sidebarToggle">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 导航内容 -->
</nav>

<!-- 页面主体容器：flex布局，占满视口高度，避开顶部导航栏 -->
<div class="d-flex" style="height: calc(100vh - 56px); margin-top: 56px;">
  <!-- 侧边栏：默认固定宽度，通过类控制显示/隐藏 -->
  <div class="bg-light border-right" id="sidebar" style="width: 250px;">
    <!-- 侧边栏菜单内容 -->
  </div>

  <!-- 主内容区：自动填充剩余空间，开启滚动 -->
  <div class="flex-grow-1 overflow-auto" id="mainContent">
    <!-- PHP加载的内容容器 -->
    <div class="content-inner">
      <?php include 'your-page-content.php'; ?>
    </div>
  </div>
</div>

• 顶部导航用fixed-top固定，主体容器通过margin-top:56px避开导航栏高度（Bootstrap4默认navbar高度为56px），解决内容被导航栏覆盖的问题。
• 主体容器用d-flex实现弹性布局，侧边栏固定宽度，内容区用flex-grow-1自动占满剩余空间，overflow-auto确保内容过长时可滚动。

2. 动态控制内容区边距（解决侧边栏遮挡/隐藏后居中问题） #

通过JavaScript监听侧边栏切换状态，给内容区添加/移除自定义类来动态调整边距：

自定义CSS #

/* 侧边栏展开时，内容区左侧留40px边距 */
.content-inner.sidebar-open {
  margin-left: 40px;
  width: calc(100% - 40px);
}

/* 侧边栏收起时，内容区占满宽度 */
.content-inner.sidebar-closed {
  margin-left: 0;
  width: 100%;
}

/* 小屏幕适配：强制内容区占满宽度，避免内容消失 */
@media (max-width: 768px) {
  .content-inner.sidebar-open {
    margin-left: 0;
    width: 100%;
  }
}

JavaScript 控制逻辑 #

document.getElementById('sidebarToggle').addEventListener('click', function() {
  const sidebar = document.getElementById('sidebar');
  const contentInner = document.querySelector('.content-inner');
  
  // 切换侧边栏显示/隐藏状态
  sidebar.classList.toggle('d-none');
  sidebar.classList.toggle('d-block');
  
  // 同步切换内容区的边距类
  if (sidebar.classList.contains('d-block')) {
    contentInner.classList.remove('sidebar-closed');
    contentInner.classList.add('sidebar-open');
  } else {
    contentInner.classList.remove('sidebar-open');
    contentInner.classList.add('sidebar-closed');
  }
});

• 点击切换按钮时，同步更新侧边栏和内容区的类，避免手动设置margin导致的隐藏后居中问题。
• 媒体查询针对小屏幕（768px以下），强制内容区占满宽度，解决小屏内容消失的问题。

3. 侧边栏移动端优化（抽屉式展开） #

Bootstrap4.3无原生offcanvas组件，通过自定义CSS实现移动端侧边栏滑入效果，避免挤占内容空间：

@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    top: 56px;
    left: -250px;
    height: calc(100vh - 56px);
    z-index: 1000;
    transition: left 0.3s ease;
  }
  
  #sidebar.show-mobile {
    left: 0;
  }
}

修改JS逻辑，适配移动端切换：

document.getElementById('sidebarToggle').addEventListener('click', function() {
  const sidebar = document.getElementById('sidebar');
  const contentInner = document.querySelector('.content-inner');
  const isMobile = window.innerWidth <= 768;
  
  if (isMobile) {
    sidebar.classList.toggle('show-mobile');
    // 移动端侧边栏展开时，内容区不需要额外边距
    contentInner.classList.remove('sidebar-open');
    contentInner.classList.add('sidebar-closed');
  } else {
    sidebar.classList.toggle('d-none');
    sidebar.classList.toggle('d-block');
    
    if (sidebar.classList.contains('d-block')) {
      contentInner.classList.add('sidebar-open');
      contentInner.classList.remove('sidebar-closed');
    } else {
      contentInner.classList.remove('sidebar-open');
      contentInner.classList.add('sidebar-closed');
    }
  }
});

4. 额外注意事项 #

• PHP加载的内容容器.content-inner内部建议使用Bootstrap的container或container-fluid类，避免内容溢出或布局错乱。
• 侧边栏宽度可按需调整，对应的内容区calc(100% - 40px)需同步适配。
• 测试不同屏幕尺寸，确保滚动行为正常，内容区不会被侧边栏或导航栏遮挡。

内容的提问来源于stack exchange，提问作者unity-student