我试着让品牌和下拉列表（在右边）与页面的内容保持一致。一般的设计是有一个内容列，在较大的设备上采用col-8，在较小的设备上采用col-12。我想有导航栏和页脚总是100%的宽度（我的意思是导航栏的颜色），但在该导航栏的内容应该是相同的宽度作为页面的内容。我尝试了不同的选择，但从来没有做对。
下面是我的代码的结果：enter image description here我希望“品牌”总是与“一些文本”一致。与“X”类似，但在右边。
我尝试移动row/col/container元素，但看起来“nav”元素CSS的定义方式阻止了我的设计。我是Bootstrap的新手，我想我可能会在这里得到一些错误的想法。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>