如何用Flexbox实现ASP.NET Core MVC侧边栏与主内容左右布局

问题根源 #

当前侧边栏与主内容区域是两个独立的块级 <div> 元素，未被放置在同一水平方向的弹性布局容器内，浏览器默认会将块级元素按垂直顺序堆叠，最终导致主内容被挤压到侧边栏下方。

关键调整点 #

• 新增一个全局横向弹性父容器，将侧边栏、主内容区域全部包裹在内，为容器添加Bootstrap的d-flex类（实现水平方向的弹性排布）、align-items-start类（避免弹性容器内的元素被默认拉伸撑满整高）。
• 修正代码中不兼容Bootstrap 4.6的类名：当前使用的me-md-auto是Bootstrap 5才引入的逻辑边距类，在4.6版本中需要替换为对应的mr-md-auto，否则边距样式不会生效。
• 为主内容容器添加flex-grow-1类，让主内容自动填充除侧边栏固定280px宽度外的剩余页面空间，不再独占整行宽度。
• 移除主内容容器默认的container类，避免其自带的固定宽度、水平居中样式挤占横向布局空间，按需为其添加p-4类补充内边距，优化内容展示的留白。
• 调整侧边栏的高度样式，使用min-height: 100vh替代原强制设置的height: 100vh，避免页面内容滚动时出现样式错位。

调整后的可运行代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- 横向弹性父容器 -->
<div class="d-flex align-items-start">
  <!-- 侧边栏模块 -->
  <div class="d-flex flex-column text-white bg-dark" style="width: 280px; min-height: 100vh;">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 mr-md-auto text-white text-decoration-none">
      <img class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" alt="Logo" style="height: 60px; width: 150px;" />
    </a>
    <div class="d-flex align-items-center text-light text-decoration-none">
      <!-- 侧边栏导航内容可在此处补充 -->
    </div>
  </div>

  <!-- 主内容模块 -->
  <div class="flex-grow-1 p-4">
    <main role="main" class="pb-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum.
        Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada
        fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.</p>
    </main>
  </div>
</div>

最终效果 #

调整完成后，侧边栏会固定在页面左侧占280px宽度，主内容区域会自动填充右侧剩余的全部横向空间，不会再被堆叠到侧边栏下方。

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