Bootstrap实现导航栏内容与页面主体内容对齐的问题

我希望导航栏中的品牌（Brand）和右侧下拉菜单（X）能与页面主体内容对齐。页面整体设计要求：

• 大屏设备下主体内容占col-8，小屏设备下占col-12；
• 导航栏和footer的背景保持100%宽度，但导航栏内的内容宽度需与页面主体一致。

我尝试调整row、col、container元素的布局，但始终无法实现预期效果。当前代码里，我想让“Brand”始终与“Some text”对齐，“X”则在右侧对应位置。我是Bootstrap新手，可能对相关布局逻辑存在误解。

以下是我的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="container mx-auto pt-5">
      <div class="row">
        <div class="col-12 col-md-8 mx-auto">
          <nav class="navbar bg-body-tertiary fixed-top">
            <div class="container-fluid">
              <a class="navbar-brand">Brand</a>
              <div class="nav-item dropdown">
                <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      X
                    </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-8 mx-auto">
          <div class="row">
            <div class="card border-light mb-3">
              <div class="card-body">
                <p class="card-text">Some text</p>
              </div>
            </div>

            <footer class="bg-light text-center fixed-bottom">
              <div class="text-center text-secondary p-3">
                Footer
              </div>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

你的核心问题是把导航栏嵌套在了col-8容器里，导致导航栏背景无法全屏，同时内部的container-fluid会撑满父容器，没法和主体内容对齐。调整思路是：让导航栏直接全屏，内部用和主体一致的容器来控制内容宽度；主体内容用标准的container+row+col结构实现响应式宽度。

修正后的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- 全屏导航栏 -->
<nav class="navbar bg-body-tertiary fixed-top">
  <!-- 用container而非container-fluid，让内容和主体对齐 -->
  <div class="container">
    <a class="navbar-brand">Brand</a>
    <div class="nav-item dropdown">
      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        X
      </a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 主体内容容器 -->
<div class="container pt-5 mt-5">
  <div class="row">
    <!-- 响应式列：小屏12列，大屏8列，自动居中 -->
    <div class="col-12 col-md-8 mx-auto">
      <div class="card border-light mb-3">
        <div class="card-body">
          <p class="card-text">Some text</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 全屏footer -->
<footer class="bg-light text-center fixed-bottom">
  <div class="container">
    <div class="text-center text-secondary p-3">
      Footer
    </div>
  </div>
</footer>

• 导航栏结构：把navbar从嵌套的col-8中移出，直接作为顶层元素实现全屏背景；内部用container而非container-fluid，这样导航栏内容会和主体的container宽度一致，自然和主体内容对齐。
• 主体内容简化：去掉多余的嵌套row和col，用标准的container→row→col-12 col-md-8 mx-auto结构实现响应式居中的主体。
• Footer优化：同样在全屏背景的footer内部加入container，让footer内容也和主体对齐（如果不需要可以去掉，但保持统一更美观）。
• 补充Bootstrap JS：原代码没引入Bootstrap的JS，下拉菜单data-bs-toggle会失效，所以加上了CDN链接。

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