HTML页面左侧垂直导航栏旁无法显示中间内容求助

你的核心问题是导航栏和内容区未设置为左右并排布局，当前导航栏是独立块级元素，内容容器默认排列在其下方，导致你误以为中间区域无内容（实际内容在页面下方）。

具体修改步骤： #

1. 给导航栏和内容区添加共同父容器，用Bootstrap的d-flex类实现水平布局
2. 让内容区占据剩余空间，添加flex-grow-1类，保留内边距样式
3. 移除冗余的未使用CSS类，简化代码结构

修改后的完整代码如下：

精简后CSS #

/* Custom styles */
.nav-link {
  border: 1px solid black;
  background-color: white;
  color: black;
  padding: 10px;
  margin: 5px 0;
  border-radius: 0;
}

/* Active/hover/focus状态样式 */
.nav-link.active,
.nav-link:focus,
.nav-link:hover {
  background-color: #e9ecef;
  color: black;
}

.nav-link.active {
  border-color: #e9ecef;
  background-color: #e9ecef;
}

调整布局后的HTML #

<!-- Include Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">

<!-- 父容器实现水平布局，确保占满视口高度 -->
<div class="d-flex" style="min-height: 100vh;">
  <!-- 左侧导航栏 -->
  <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
      <span class="fs-4">Peeps</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Org Chart
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          OKRs
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Performance
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Onboarding
        </a>
      </li>
      <li>
        <a href="#" class="nav-link link-dark">
          Learning & Development
        </a>
      </li>
    </ul>
    <hr>
    <div class="dropdown">
      <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
        <strong>More</strong>
      </a>
      <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
        <li><a class="dropdown-item" href="#">New project...</a></li>
        <li><a class="dropdown-item" href="#">Settings</a></li>
        <li><a class="dropdown-item" href="#">Profile</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
      </ul>
    </div>
  </div>

  <!-- 右侧内容区，自动填充剩余空间 -->
  <div class="flex-grow-1 p-3">
    <div class="row">
      <div class="col-12 mb-3">
        <div class="p-3 box">
          <h2>Welcome to Peeps!</h2>
        </div>
      </div>
      <div class="col-md-6">
        <div class="p-3 box">
          <p>Recommendations on how to get started go here.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="p-3 box">
          <p>Some relevant graphs will go here. This will likely be around employee data, and would be customizable.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Include Bootstrap JS and its dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

额外说明： #

• 父容器的min-height: 100vh确保布局至少占满浏览器视口高度，避免塌陷
• flex-grow-1让内容区自动填充导航栏以外的剩余空间，实现中间区域显示效果
• 移除了原CSS中未使用的.navbar、.navbar-nav等冗余类

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