Bootstrap 5：折叠导航栏时navbar-brand居中，展开时保持左右

要实现导航栏折叠时navbar-brand居中，展开时保持在左侧/右侧，有两种常用方案，具体如下：

方案一：自定义CSS媒体查询（单品牌元素） #

这种方法只需要一个品牌元素，通过CSS控制不同断点下的位置：

HTML结构 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">My Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS样式 #

/* 针对Bootstrap lg断点（屏幕<992px时，导航栏折叠） */
@media (max-width: 991.98px) {
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  /* 让折叠按钮靠右，避免和居中品牌重叠 */
  .navbar-toggler {
    margin-left: auto;
  }
}

• 如果希望展开时品牌在右侧，只需给navbar-brand添加ms-auto类，同时保留媒体查询里的居中样式即可。

方案二：双品牌元素+Bootstrap工具类（无额外CSS） #

这种方法通过创建两个品牌元素，利用Bootstrap的响应式显示类控制不同状态下的可见性：

HTML结构 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <!-- 折叠状态下显示：居中品牌 -->
    <a class="navbar-brand d-lg-none mx-auto" href="#">My Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse align-items-center" id="navbarContent">
      <!-- 展开状态下显示：左侧品牌 -->
      <a class="navbar-brand d-none d-lg-block" href="#">My Brand</a>
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

• d-lg-none mx-auto：在大屏幕（lg及以上）隐藏，小屏幕显示并水平居中。
• d-none d-lg-block：在小屏幕隐藏，大屏幕显示（默认左侧，若要右侧添加ms-auto类）。

两种方案各有优劣：

• 方案一代码更简洁，但需要自定义CSS；
• 方案二纯用Bootstrap工具类实现，无需额外样式，但存在重复的DOM元素。

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