Bootstrap导航栏图片后置显示异常，需按钮与图片并排、链接列表居下

问题根源 #

你的代码里，container-fluid是默认占满整行的块级元素，当把图片放在切换按钮之后、container-fluid之前时，navbar的flex布局会被container-fluid的宽度特性打乱，导致图片无法和切换按钮并排，进而出现布局异常。

修正后的代码 #

<nav id="navbar" class="navbar navbar-expand-lg fixed-top px-5">
  <!-- 用flex容器包裹切换按钮和图片，确保两者并排 -->
  <div class="d-flex align-items-center">
    <button class="navbar-toggler me-2" 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="col-xxl-1 col-xl-1 col-lg-1 col-md-2 col-sm-3 col-4 d-flex justify-content-center align-items-center pt-3 mb-1 pe-2">
      <img src="/images/05.jpg" alt="cat" class="img-fluid">
    </div>
  </div>
  
  <!-- 折叠导航容器，去掉多余的container-fluid，确保占满整行 -->
  <div class="collapse navbar-collapse w-100" id="navbarTogglerDemo01">
    <ul id="navbar-links" class="navbar-nav mb-lg-0 justify-content-around mt-4 w-100">
      <li class="nav-item">
        <a class="nav-link fw-semibold fs-5" href="#">TEXT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fw-semibold fs-5" href="#">TEXT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fw-semibold fs-5" href="#">TEXT</a>
      </li>
    </ul>
  </div>
</nav>

核心调整说明 #

• 把切换按钮和图片放进同一个d-flex容器，通过align-items-center保证垂直居中，me-2给两者添加间距，实现并排效果。
• 移除原代码中多余的container-fluid，直接让折叠容器作为navbar的子元素，添加w-100确保折叠内容展开后占满整行，显示在切换按钮和图片的下方。

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