Bootstrap 5页面内容随屏幕缩放被侧边栏遮挡的解决问询

开发者阿泽

2026-8-19

侧边栏固定布局问题解决方案

问题描述

开发侧边栏时整体效果正常，但打开新页面后调整屏幕尺寸，页面内容会滑到侧边栏下方。需要实现侧边栏不随屏幕缩小改变尺寸的效果，以下是当前的_layout页面代码：

<style>
    #sidebar {
        position: fixed;
        width: 250px;
        z-index: 1000;
        left: 0;
        top: 68px;
        bottom: 60px;
        display: block;
        background-color: rgb(95,131,183);
    }
    .nav-item {
        border-bottom-color: #9EB4D3 !important;
        word-spacing: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        
    }
    .nav-link:hover {
        background-color: #373443;
    }
</style>

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home">
                    <img src="~/images/LogoGrey.png" style="width:140px; margin-left: 30px"/>
                </a>
                <div class="d-flex" style="height: 40px; margin-left: 50px">
                    <div class="vr"></div>
                </div>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">

                    </ul>
                </div>
                <i class="bi bi-search" style="margin-right: 20px; font-size:larger"></i>
                <i class="bi bi-bell" style="margin-right: 20px; font-size:larger"></i>
                <div class="d-flex" style="height: 40px; margin-right:20px">
                    <div class="vr"></div>
                </div>
                <span class="float-right">
                    <img class="img-thumbnail rounded-circle" style="width: 40px; height: 40px;" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg">
                    Jane Doe
                </span>
                <div class="d-flex" style="height: 40px; margin-left:20px" >
                    <div class="vr"></div>
                </div>
                <span class="form-label" style="padding-left:20px; margin-right: 20px; padding-top: 5px">
                    Logout
                </span>
            </div>
        </nav>
    </header>

    <!-- Side Nav-->
    <nav class="navbar">
        <nav class="navbar-nav">
            <div id="sidebar" class="sidebar">
                <ul class="nav flex-column" id="nav_accordion">
                    <li class="nav-item border-bottom">
                        <a class="nav-link bi bi-house" asp-action="Index" asp-controller="Home" style="color: whitesmoke; padding-left: 10px"> Home </a>
                    </li>
                    <li class="nav-item border-bottom">
                        <a class="nav-link  bi bi-speedometer" href="#" style="color: whitesmoke; padding-left: 10px"> Dashboard  </a>
                    </li>
                    <li class="nav-item has-submenu border-bottom">
                        <a class="nav-link bi bi-gear" href="#" style="color:whitesmoke; padding-left: 10px"> Setup </a>
                        <ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190);">
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> General Settings </a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Regions</a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Stores</a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Service Areas</a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Departments</a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Categories</a></li>
                        </ul>
                    </li>
                    <li class="nav-item has-submenu border-bottom">
                        <a class="nav-link bi bi-people" href="#" style="color: whitesmoke; padding-left: 10px"> Contacts  </a>
                        <ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
                            <li><a class="nav-link bi bi-caret-right" asp-area="" asp-controller="Users" asp-action="UsersIndex" style="color: whitesmoke; word-spacing: normal; padding-left: 50px"> Users </a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Customers </a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Suppliers </a></li>
                        </ul>
                    </li>
                    <li class="nav-item has-submenu border-bottom">
                        <a class="nav-link bi bi-journal-text" href="#" style="color: whitesmoke; padding-left: 10px"> Recipes  </a>
                        <ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Products </a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Components </a></li>
                            <li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Finished Products </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </nav>

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="navbar-light bg-light footer">
        <div class="col-4" style="margin-left:10px">
            <label>
                &copy; 2022 - TasteWise International
            </label>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

解决办法

核心问题

侧边栏使用position: fixed脱离了文档流，主内容容器没有预留侧边栏的宽度，导致屏幕缩小时内容被侧边栏覆盖；同时缺少强制固定侧边栏宽度的设置，极端情况下可能被压缩。

具体修改步骤

固定侧边栏宽度：给#sidebar添加min-width属性，确保无论屏幕尺寸如何，侧边栏宽度保持250px，同时添加滚动避免内容溢出：

#sidebar {
    position: fixed;
    width: 250px;
    min-width: 250px; /* 强制保持宽度 */
    z-index: 1000;
    left: 0;
    top: 68px;
    bottom: 60px;
    display: block;
    background-color: rgb(95,131,183);
    overflow-y: auto; /* 内容过多时允许垂直滚动 */
}

为主内容区域预留侧边栏空间：修改.container的样式，添加左侧边距匹配侧边栏宽度，避免内容被遮挡：

.container {
    margin-left: 250px; /* 和侧边栏宽度一致 */
    padding-top: 1rem; /* 与顶部导航栏保持间距 */
}

小屏幕响应式优化（可选）：如果需要在移动端等小屏幕下优化显示，添加媒体查询调整布局：

@media (max-width: 768px) {
    #sidebar {
        width: 100%;
        min-width: 100%;
        top: 68px;
        bottom: auto;
        height: auto;
        max-height: 200px; /* 限制侧边栏高度 */
    }
    .container {
        margin-left: 0;
        margin-top: 220px; /* 适配侧边栏变为顶部后的间距 */
    }
}

修改后的完整样式代码

<style>
    #sidebar {
        position: fixed;
        width: 250px;
        min-width: 250px;
        z-index: 1000;
        left: 0;
        top: 68px;
        bottom: 60px;
        display: block;
        background-color: rgb(95,131,183);
        overflow-y: auto;
    }
    .nav-item {
        border-bottom-color: #9EB4D3 !important;
        word-spacing: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        
    }
    .nav-link:hover {
        background-color: #373443;
    }
    .container {
        margin-left: 250px;
        padding-top: 1rem;
    }
    @media (max-width: 768px) {
        #sidebar {
            width: 100%;
            min-width: 100%;
            top: 68px;
            bottom: auto;
            height: auto;
            max-height: 200px;
        }
        .container {
            margin-left: 0;
            margin-top: 220px;
        }
    }
</style>

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

Bootstrap 5页面内容随屏幕缩放被侧边栏遮挡的解决问询

问题描述 #

解决办法 #

核心问题 #

具体修改步骤 #

修改后的完整样式代码 #

问题描述

解决办法

核心问题

具体修改步骤

修改后的完整样式代码