Bootstrap可折叠导航栏布局求助：品牌左、图标居中、单项居右

折腾了两天还没搞定这种Navbar布局确实闹心！我之前也踩过Bootstrap折叠Navbar里Flexbox失效的坑，给你一套能完美实现「brand居左、中间图标居中、单个图标居右+全元素可折叠」的方案：

完整代码示例 #

<nav class="navbar navbar-expand-lg bg-bee navbar-bee d-flex flex-wrap align-items-center">
  <!-- 居左的Brand -->
  <a class="navbar-brand" href="#">My Brand</a>

  <!-- 折叠触发按钮 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapseContent">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 可折叠内容容器 -->
  <div class="collapse navbar-collapse d-flex flex-column d-lg-flex flex-lg-row align-items-lg-center" id="navbarCollapseContent">
    <!-- 中间居中的图标组 -->
    <div class="mx-auto d-flex gap-3">
      <a href="#" class="nav-link text-dark"><i class="bi bi-house"></i></a>
      <a href="#" class="nav-link text-dark"><i class="bi bi-search"></i></a>
      <a href="#" class="nav-link text-dark"><i class="bi bi-bell"></i></a>
    </div>

    <!-- 居右的单个图标 -->
    <div class="ms-auto">
      <a href="#" class="nav-link text-dark"><i class="bi bi-person-circle"></i></a>
    </div>
  </div>
</nav>

<!-- 补充小屏折叠后的样式调整 -->
<style>
@media (max-width: 991.98px) {
  .navbar-collapse .mx-auto {
    margin: 0.75rem 0;
    width: 100%;
  }
  .navbar-collapse .ms-auto {
    margin-top: 0.5rem;
  }
}
</style>

关键细节解释 #

• 外层Navbar的Flex基础：给navbar类添加d-flex flex-wrap align-items-center，替代Bootstrap默认的布局逻辑，确保整个Navbar始终以Flex模式工作，避免折叠状态下Flex失效。
• 折叠容器的响应式Flex：给navbar-collapse设置d-flex flex-column d-lg-flex flex-lg-row align-items-lg-center，实现：
  • 小屏（小于lg）展开后，内容垂直排列，符合移动端浏览习惯
  • 大屏（lg及以上）时，内容水平排列，且垂直居中对齐
• 布局定位技巧：
  • 中间图标组用mx-auto，在大屏的剩余空间里自动居中
  • 右侧图标用ms-auto，强制占据最右侧空间
• 小屏适配：通过媒体查询调整折叠展开后的元素间距和宽度，避免居中图标在小屏里显得突兀，保持垂直布局的整洁性

这样调整后，不管是大屏的三分布局，还是小屏折叠展开后的垂直排列，所有元素都能正常工作，Flexbox也不会再失效啦！

内容的提问来源于stack exchange，提问作者César Escudero