无法用CSS和Bootstrap实现Navbar-brand响应式居中及右侧导航布局

完整导航栏代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container position-relative">
    <!-- 居中的品牌 -->
    <a class="navbar-brand position-absolute top-50 start-50 translate-middle" href="#">Navbar Brand</a>
    
    <!-- 右侧的汉堡按钮 -->
    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- 导航菜单 -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo01">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

必要的自定义CSS #

/* 解决小屏时品牌被汉堡按钮遮挡的问题 */
@media (max-width: 991.98px) {
  .navbar-brand {
    transform: translate(-50%, -50%) !important;
    z-index: 10;
  }
}

关键说明 #

• 用Bootstrap内置的position-absolute、top-50、start-50、translate-middle类实现navbar-brand绝对居中，完全不受其他元素布局干扰。
• 给外层容器加position-relative，确保品牌的绝对定位参考导航栏容器。
• 汉堡按钮通过ms-auto靠右对齐，折叠菜单用justify-content-end让导航项始终在右侧排列。
• 小屏媒体查询里的样式是为了避免汉堡按钮遮挡居中品牌，同时提升品牌的层级确保可见。

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