Bootstrap 5侧边栏导致页面内容被遮挡的问题求助

你的问题核心是固定定位的侧边栏脱离了文档流，同时混用了Bootstrap栅格类（col-2）和自定义固定宽度，再加上主内容区域未预留侧边栏空间，导致屏幕尺寸变化时内容被侧边栏覆盖。

具体修改步骤 #

1. 清理冲突类：移除侧边栏上的col-2、float-start，这两个栅格类与position-fixed不兼容——栅格类用于文档流内布局，固定定位元素已脱离文档流，无需这些类。
2. 为主内容留空间：给@RenderBody()所在的主内容容器添加左侧间距，宽度等于侧边栏的固定宽度（250px），避免内容被侧边栏覆盖。
3. 简化冗余容器：container-fluid和row包裹固定定位元素没有意义，直接简化结构。

修正后的代码 #

侧边栏部分

<!-- 侧边栏 -->
<nav class="sidebar card py-2 mb-4 vh-100 rounded-0 position-fixed" style="background-color: rgb(95,131,183); width: 250px; padding-left: 0; padding-right: 0;">
    <ul class="nav flex-column" id="nav_accordion">
        <li class="nav-item border-bottom">
            <a class="nav-link bi bi-house" asp-area="" asp-controller="Home" style="color:whitesmoke; padding-left: 10px"> Home </a>
        </li>
        <li class="nav-item border-bottom">
            <a class="nav-link bi bi-gear" href="#" style="color:whitesmoke; padding-left: 10px"> Settings </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-people" href="#" style="color: whitesmoke; padding-left: 10px"> Contacts </a>
            <ul class="submenu collapse" style="padding-left: 0; padding-right: 0;">
                <li><a class="nav-link" asp-area="" asp-controller="Users" asp-action="UsersIndex" style="color: whitesmoke"> Users </a></li>
                <li><a class="nav-link" href="#" style=" color: whitesmoke"> Customers </a></li>
                <li><a class="nav-link" href="#" style=" color: whitesmoke"> Suppliers </a></li>
            </ul>
        </li>
    </ul>
</nav>

主内容区域（_Layout视图中@RenderBody()的容器）

<!-- 主内容区域 -->
<div class="main-content" style="margin-left: 250px; padding: 20px;">
    @RenderBody()
</div>

可选：响应式适配（小屏幕隐藏侧边栏）

添加以下CSS实现移动端适配：

@media (max-width: 768px) {
    .sidebar {
        display: none; /* 可替换为折叠菜单逻辑 */
    }
    .main-content {
        margin-left: 0;
    }
}

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