PHP库存系统侧边栏与导航栏全局复用及布局错位修复咨询

基于Bootstrap栅格与定位特性，问题源于布局结构未正确划分，修复步骤如下：

1. 调整基础结构
   用Bootstrap容器+栅格系统，将NavBar置于最外层，下方用row包裹Sidebar与内容区，确保二者水平排列：

   <!-- 顶部NavBar -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <!-- NavBar内容 -->
   </nav>
   
   <!-- 主内容容器 -->
   <div class="container-fluid">
     <div class="row">
       <!-- Sidebar -->
       <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
         <!-- Sidebar内容 -->
       </nav>
   
       <!-- 动态加载内容区 -->
       <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
         <!-- 此处加载Home/其他视图内容 -->
       </main>
     </div>
   </div>
   

2. 固定Sidebar高度（可选）
   若需Sidebar固定不随滚动移动，添加CSS样式：

   .sidebar {
     height: calc(100vh - 56px); /* 减去默认Bootstrap NavBar高度56px */
     position: sticky;
     top: 56px;
     overflow-y: auto;
   }
   

利用PHP输出缓冲与模板包含机制实现，步骤如下：

1. 创建基础模板文件layout.php
   封装NavBar、Sidebar与基础布局，预留内容占位符：

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <title><?php echo isset($title) ? $title : '库存系统'; ?></title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
     <!-- 顶部NavBar -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <!-- NavBar内容 -->
     </nav>
   
     <div class="container-fluid">
       <div class="row">
         <!-- Sidebar -->
         <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
           <!-- Sidebar内容 -->
         </nav>
   
         <!-- 动态内容占位符 -->
         <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
           <?php echo $content; ?>
         </main>
       </div>
     </div>
   
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   </body>
   </html>
   

2. 创建独立Login/404视图
   这两个页面无需复用布局，直接编写完整HTML结构，例如login.php：

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <title>登录</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
     <!-- 登录表单内容 -->
   </body>
   </html>
   

3. 修改index.php视图加载逻辑
   根据路由判断是否套用基础模板：

   <?php
   $page = $_GET['page'] ?? 'home';
   $excludePages = ['login', '404'];
   
   if (!in_array($page, $excludePages)) {
     $title = ucfirst($page); // 根据页面自动设置标题
     ob_start();
     include "views/{$page}.php";
     $content = ob_get_clean();
     include 'layout.php';
   } else {
     include "views/{$page}.php";
   }
   ?>
   

   后续新增视图仅需编写内容部分，index.php会自动套用基础模板。

• 确保Sidebar的Bootstrap栅格列数设置正确，col-md-3与col-md-9会在中等屏幕及以上水平排列，小屏幕自动堆叠，符合响应式要求。
• 若使用Bootstrap折叠组件实现Sidebar小屏幕收起功能，需确认JS文件引入正常。

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