如何在Bootstrap Navbar中内联Div？导航栏元素同行显示问题

我在用Bootstrap开发Offcanvas侧边栏导航时遇到布局问题，想让导航栏里的「Test」文本和「Olau Pla Richart」品牌文本显示在同一行。试过加display: inline;和display: inline-block;样式，但完全没效果，当前显示效果如下：

我的代码如下：

<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand mx-2" href="#">Olau Pla Richart</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
        <div class="offcanvas-header">
          <h4 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Menu</h4>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
                <h5><a class="nav-link active border-bottom bi bi-house" href="#home"> Home</a></h5>
            </li>
            <li class="nav-item">
                <h5><a class="nav-link border-bottom bi bi-info-circle" href="#about"> About</a></h5>
            </li>
            <li class="nav-item">
                <h5><a class="nav-link border-bottom bi bi-person-lines-fill" href="#contact"> Contact</a></h5>
              </li>
            <li class="nav-item">
                <h5><a class="nav-link border-bottom bi bi-card-heading" href="#"> Blog</a></h5>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div>
        <a>Test</a>
    </div>
</nav>

问题根源是Bootstrap的navbar默认是flex布局，你把「Test」放在了container-fluid外面——这个容器已经占满导航栏宽度，导致外部div被挤到下一行。只需把「Test」的容器移到container-fluid内部，配合Bootstrap自带的flex工具类就能解决：

修改后的代码： #

<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid d-flex align-items-center">
      <a class="navbar-brand mx-2" href="#">Olau Pla Richart</a>
      <!-- 将Test的div移到container-fluid内部 -->
      <div class="text-white mx-2">
          <a>Test</a>
      </div>
      <!-- 给按钮加ms-auto让它自动靠右 -->
      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
        <div class="offcanvas-header">
          <h4 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Menu</h4>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
                <h5><a class="nav-link active border-bottom bi bi-house" href="#home"> Home</a></h5>
            </li>
            <li class="nav-item">
                <h5><a class="nav-link border-bottom bi bi-info-circle" href="#about"> About</a></h5>
            </li>
            <li class="nav-item">
                <h5><a class="nav-link border-bottom bi bi-person-lines-fill" href="#contact"> Contact</a></h5>
              </li>
            <li class="nav-item">
                <h5><a class="nav-link border-bottom bi bi-card-heading" href="#"> Blog</a></h5>
            </li>
          </ul>
        </div>
      </div>
    </div>
</nav>

关键调整说明： #

• 把包含「Test」的div移入container-fluid，确保它处于导航栏的flex布局容器内
• 给「Test」的div加text-white类，保证在深色背景下文字可见（可按需调整）
• 给导航按钮加ms-auto类，让它自动靠右对齐，避免和文本挤在一起
• 保留container-fluid的d-flex align-items-center（Bootstrap默认已包含，显式写出更清晰），确保内部元素垂直居中

这样修改后，「Test」就会和品牌文本显示在同一行，无需额外自定义display样式，完全利用Bootstrap原生布局类实现需求。

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