Bootstrap布局问题：如何防止侧边栏与主内容重叠并保留内边距？

问题核心是固定定位的侧边栏脱离了文档流，主内容容器未预留足够左侧空间，导致窗口缩小时两者重叠。以下是具体修复方案：

修复思路 #

• 给主内容容器设置左侧外边距，宽度匹配侧边栏的固定宽度（200px），确保主内容不会被侧边栏覆盖；若需要额外内边距，可在基础上增加数值（比如220px），同时保留容器原有的内边距类。
• 在响应式断点（700px）的媒体查询中，重置主内容的左侧外边距为0，因为此时侧边栏已改为相对定位，不再占用固定左侧空间。

修改后的代码 #

HTML（结构无需调整） #

<body>
    <div class="sidebar">
        <a href="#">test</a>
        <a href="#">test</a>
        <a href="#">test</a>
    </div>
    <div class="container col-xxl-8 px-4 py-5 main_gradient" id="fade">
        <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 shadow-lg main_gradient " style=" background-color:rgb(240, 240, 255)">
        </div>
    </div>
</body>

CSS（关键修改已标注） #

.sidebar {
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow-y: auto;
}

.sidebar a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
}

.sidebar a.active {
    background-color: #04AA6D;
    color: white;
}

.sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
}

/* 新增：为主内容容器预留侧边栏宽度的左侧空间 */
#fade {
    margin-left: 200px;
    /* 如需额外内边距，可改为 margin-left: 220px; 保留原px-4类的内边距 */
}

@media screen and (max-width: 700px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .sidebar a {
        float: left;
    }
    /* 修改：移动端视图下重置主内容的左侧外边距 */
    #fade {
        margin-left: 0;
    }
}

@media screen and (max-width: 400px) {
    .sidebar a {
        text-align: center;
        float: none;
    }
}

补充说明 #

• 用margin-left而非padding-left的原因：padding会增加容器总宽度，窗口缩小时更容易触发溢出；margin是在容器外部预留空间，不影响容器自身宽度计算。
• 响应式断点的重置操作，确保移动端视图下侧边栏与主内容正常堆叠，无多余间距。

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