Bootstrap布局问题：如何将主内容放在侧边导航旁、欢迎栏下方

解决方案 #

你的问题核心是布局结构层级写错了，主内容放在了弹性布局容器外，所以无法和侧边栏、顶部栏对齐，按以下步骤修改即可：

• 第一步：调整HTML结构层级
  把你现在写在#wrapper闭合标签外的主内容<div class="container">整体移动到content-wrapper容器内部，放在顶部nav标签的后面即可，调整后核心结构参考：

<div class="d-flex" id="wrapper">
  <!-- 侧边栏原有代码保持不变 -->
  <div class="side-nav">
    ...侧边栏原有内容...
  </div>
  <div class="content-wrapper">
    <!-- 顶部导航栏原有代码保持不变 -->
    <nav class="navbar ...">
      ...导航栏原有内容...
    </nav>
    <!-- 主内容移动到此处 -->
    <div class="container px-4">
      <div class="row">
        <div class="col">
          <p>test</p>
        </div>
      </div>
    </div>
  </div>
</div>

• 第二步：补充基础布局样式
  在你的自定义style.css文件中添加以下代码，保证布局容器占满页面：

/* 外层弹性容器占满整个视口高度 */
#wrapper {
  width: 100%;
  min-height: 100vh;
}
/* 侧边栏固定宽度，高度撑满，可根据需求调整宽度数值 */
.side-nav {
  width: 250px;
  min-height: 100vh;
}
/* 内容区占满侧边栏外的所有宽度 */
.content-wrapper {
  width: calc(100% - 250px);
}

• 第三步：修正代码小错误
  你现有代码中菜单图标的标签属性缺少闭合引号，将<i class="fas fa-2x fa-align-left primary-text mr-3 id=" menu-toggle ">修改为<i class="fas fa-2x fa-align-left primary-text mr-3" id="menu-toggle">，避免属性解析异常。

修改完成后即可实现你要的布局效果：侧边栏固定在左侧，顶部欢迎栏在内容区顶部，主内容在欢迎栏下方、侧边栏右侧。

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