Bootstrap 5实现顶部导航+侧边栏+中间可滚动内容布局求助

解决方案 #

你的代码核心问题是缺少全局高度约束、侧边栏无固定设置、内容区无滚动属性，按以下步骤修改即可实现预期布局：

1. 新增全局样式

html, body {
  height: 100%;
  overflow: hidden;
}
/* 导航栏下方主容器高度 = 视口高度减去导航栏默认高度，可按需调整 */
.main-wrapper {
  height: calc(100vh - 56px);
}
/* 侧边栏通用样式 */
.sidebar {
  width: 280px;
  overflow-y: auto;
}
/* 中间内容区样式 */
.main-content {
  overflow-y: auto;
  flex: 1;
}

2. 调整页面结构
   将原有导航栏之后的<div class="row">替换为以下结构，原有内部内容保持不变即可：

{% block community_nav %}{% endblock %}

<!-- 主容器替换原来的row -->
<div class="d-flex main-wrapper">
    <!-- 左侧边栏：移除原有style中的width配置，新增sidebar类 -->
    <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark sidebar">
        <!-- 原有左侧边栏全部内容保持不变 -->
    </div>

    <!-- 中间内容区：替换原有col类为main-content，可按需加内边距 -->
    <div class="main-content p-3">
        <!-- 原有中间列全部内容保持不变 -->
    </div>

    <!-- 右侧边栏：同左侧修改规则 -->
    <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark sidebar">
        <!-- 原有右侧边栏全部内容保持不变 -->
    </div>
</div>

3. 可选响应式适配
   如果需要移动端适配，可给侧边栏添加d-none d-lg-block类，实现小屏幕自动隐藏侧边栏，也可结合Bootstrap的offcanvas组件实现抽屉式侧边栏。

修改后即可实现顶部导航固定、左右侧边栏常驻、仅中间内容区滚动的预期效果。

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