Bootstrap固定导航栏与侧边栏遮挡主内容，自定义类无效怎么解决？

你遇到的遮挡问题由三个核心错误导致：

• HTML结构不符合规范：你将顶部导航、侧边栏这些页面内容放到了<head>标签中，且主页面和侧边栏代码里重复定义了<body>标签，结构完全混乱
• 未遵循SB Admin模板的布局规则：你使用的是SB Admin侧边栏模板，要求主内容必须放在#layoutSidenav_content容器内才能自动偏移避开导航栏，你没有加这个容器
• Bootstrap版本冲突：主页面引入的是Bootstrap 4，侧边栏引入的是Bootstrap 5，两个版本样式、JS互不兼容，导致布局类失效

解决步骤 #

步骤1：清理重复、错误的结构 #

1. 把head标签里的<?php include 'navbar.php';?> <?php include 'header.php';?>移动到<body>标签最开头，head里只保留meta、CSS链接、title这些资源类内容
2. 删掉侧边栏代码里的<body class="sb-nav-fixed">、</body>标签，以及重复引入的jQuery、popper、Bootstrap JS代码，避免重复加载
3. 删掉主页面里引入的Bootstrap 4的CSS、JS文件，统一使用侧边栏用到的Bootstrap 5版本资源

步骤2：修正为SB Admin要求的标准布局 #

将你的页面结构调整为以下格式即可自动解决遮挡问题：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 统一引入Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body class="sb-nav-fixed">
  <?php include 'navbar.php';?> <!-- 顶部导航放这里 -->
  <div id="layoutSidenav">
    <?php include 'sideNav.php';?> <!-- 侧边栏仅保留layoutSidenav_nav部分代码放在这里 -->
    <!-- 必须添加的主内容容器，SB Admin自带样式会自动给该容器加偏移，避开导航栏 -->
    <div id="layoutSidenav_content">
      <main>
        <div class="container-fluid px-4">
          <!-- 原有主内容放在此处 -->
          <div class="row">
            <div class="col-md-12">
              <?php
                if(isset($_SESSION['status']) && $_SESSION['status'] !='') 
                {
                  echo '
                  <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <strong>注意!</strong> '.$_SESSION['status'].'
                    <button type="button" class="close" data-bs-dismiss="alert" aria-label="关闭">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  ';
                  unset($_SESSION['status']);
                }
              ?>
              <!-- 你的表格代码放在此处 -->
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  <!-- 所有JS统一放在body末尾，不要重复引入 -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script>
</body>
</html>

备选方案：手动加偏移样式 #

如果你不想调整结构，可以直接给主内容容器加以下自定义样式：

.mainContainer {
  /* 顶部导航高度一般是56px，可根据你的实际导航高度调整 */
  padding-top: 56px;
  /* 侧边栏展开宽度是225px，可根据你的侧边栏实际宽度调整 */
  margin-left: 225px;
}
/* 响应式适配：屏幕宽度小于768px时侧边栏收起，取消左边距 */
@media (max-width: 767.98px) {
  .mainContainer {
    margin-left: 0;
  }
}

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