HTML头部导航栏、侧边导航栏与主内容区的Bootstrap布局定位问题

问题原因 #

• 顶部导航使用fixed-top类后脱离文档流，下方的侧边栏、内容区没有预留对应顶部间距，导致位置重叠
• 外层容器.wrapper未设置横向flex布局，侧边栏与内容区默认垂直排列，无法实现左右分布效果
• 引入JS资源的<script>标签使用了错误的自闭合写法，会导致脚本加载失败

修正后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Template</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <style>
        /* 固定侧边栏高度，减去顶部导航高度，避免滚动 */
        .sidebar {
            height: calc(100vh - 55px);
            position: fixed;
            left: 0;
            top: 55px; /* 对应顶部导航的高度 */
        }
        /* 内容区预留侧边栏宽度+顶部导航高度 */
        #content {
            margin-left: 3.5rem;
            margin-top: 55px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- top navigation bar -->
        <nav class="navbar navbar-expand-lg bg-white fixed-top border-primary border-bottom border-5" style="height: 55px;">
            <div class="container-fluid">
                <img src="/images/favicon.png" class="rounded float-start" height="45" alt="">
                <a class="navbar-brand me-auto ms-lg-0 ps-3">
                    <h5 class="home_text">Casa Coco </h5>
                </a>
            </div>
        </nav>
        <!-- top navigation bar end-->

        <!-- 侧边栏+内容区 横向布局容器 -->
        <div class="d-flex">
            <!-- sidebar -->
            <div class="d-flex flex-column flex-shrink-0 bg-primary sidebar nopadding" style="width: 3.5rem">
                <ul class="nav nav-pills nav-flush flex-column mt-1 text-center">
                    <li class="nav-item">
                        <a href="#" class="nav-link active py-3 bg-primary" aria-current="page" title="Home"
                            data-bs-toggle="tooltip" data-bs-placement="right">
                            <i class="bi bi-house-door "></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active py-3 bg-primary" aria-current="page" title="Dashboard"
                            data-bs-toggle="tooltip" data-bs-placement="right">
                            <i class="bi bi-speedometer2"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- sidebar end-->

            <div id="content">
                <main class="p-3">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem mollitia voluptatibus excepturi
                    temporibus
                    magnam ducimus perspiciatis, quibusdam deserunt vitae maiores doloribus voluptas porro cum, distinctio
                    officia,
                    natus quod explicabo eum?
                </main>
            </div>
        </div>
    </div>

    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/jquery.dataTables.min.js"></script>
    <script src="./js/dataTables.bootstrap5.min.js"></script>
    <script src="./js/script.js"></script>
</body>
</html>

调整说明 #

• 统一设置顶部导航高度为55px，侧边栏和内容区分别通过top、margin-top属性预留对应间距，避免和顶部导航重叠
• 新增侧边栏固定定位规则，始终固定在页面左侧、导航下方
• 内容区新增左侧外边距，宽度和侧边栏一致，避免内容被侧边栏遮挡
• 修正了script标签的自闭合写法，保证JS资源正常加载

内容的提问来源于stack exchange，提问作者Gustavo A Escobar-Palafox