添加Bootstrap垂直侧边栏后文本位于页面底部，如何调整至页面顶部？

问题原因 #

布局结构不符合预期，核心问题如下：

• 外层.d-flex容器仅包含左侧侧边栏与顶部导航栏，新增的测试文本<div>This is a test</div>被放在该flex容器外部
• 左侧侧边栏设置了vh-100属性，会占满整个浏览器视口高度，导致flex容器外的文本被挤压到页面底部

解决方案 #

调整布局结构，将右侧的顶部导航、页面内容统一放在同一个纵向排列的flex容器内，与左侧侧边栏平级置于外层flex容器中即可。

修改后完整代码如下：

.navbar {
    height: 70px;
    width: 100%;
    background: #212529;
}

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   </head>
   <body>
      <div class="d-flex">
         <!-- 左侧侧边栏 -->
         <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
               <svg class="bi me-2" width="40" height="32"> </svg>
               <span class="fs-4">BBBootstrap</span>
            </a>
            <div>
            </div>
            <hr>
            <ul class="nav nav-pills flex-column mb-auto">
               <li class="nav-item">
                  <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a>
               </li>
               <li>
                  <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a>
               </li>
               <li>
                  <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a>
               </li>
               <li>
                  <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a>
               </li>
               <li>
                  <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a>
               </li>
            </ul>
            <hr>
            <div>
            </div>
         </div>
         <!-- 右侧内容容器 -->
         <div class="flex-grow-1 d-flex flex-column">
            <nav class="navbar navbar-light">
               <a class="navbar-brand" href="#" style="color: red">User</a>
               <a class="nav-link active" style="color: red" aria-current="page" (click)="logoff()" href="#">Logoff</a>
            </nav>
            <div class="p-3">
               This is a test
            </div>
         </div>
      </div>
   </body>
</html>

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