直接加mx-auto或text-center无效，因.navbar是flex容器但子元素无自动分配空间机制；必须用三栏flex结构：左.navbar-nav(order-1)、中.navbar-brand(order-2+flex-grow-1+d-flex+justify-content-center)、右.navbar-nav(order-3)。
为什么直接加 mx-auto 或 text-center 不起作用
因为 .navbar 是 flex 容器，但它的子元素（比如 .navbar-brand、.navbar-nav）默认按文档流顺序排列，没有自动分配剩余空间的机制。单纯给 .navbar-brand 加 mx-auto，它只是个 inline 元素，margin 无效；加 text-center 则只影响文本对齐，不改变 flex 布局中的位置关系。
必须用三栏 flex 结构：左空占位 + 中间 logo + 右菜单
可靠做法是显式拆成三个 flex 子项，靠 order 和 flex-grow-1 控制视觉布局：
-
<div class="navbar-nav me-auto order-1"></div>：左侧占位，可为空，加me-auto确保它“钉”在最左 -
<div class="navbar-brand order-2 flex-grow-1 d-flex justify-content-center">Logo</div>：中间区域吃掉所有剩余宽度，并居中内容 -
<div class="navbar-nav ms-auto order-3"><ul class="navbar-nav">...</ul></div>：右侧菜单，ms-auto把它推到最右
注意：order-1/order-2/order-3 保证视觉顺序，哪怕 DOM 顺序调换也不影响显示。
折叠态（offcanvas）下 logo 居中失效？两个地方必须改
小屏展开后，.offcanvas-body 是 column 方向 flex 容器，flex-grow-1 和 justify-content-center 在 .navbar-brand 上都失效。修复必须同步做两件事：
- 给
<div class="offcanvas-body">加justify-content-center - 从
<ul class="navbar-nav">中移除flex-grow-1（它不该出现在 offcanvas 的 nav 列表里）
漏掉任一，logo 就会偏左或被挤出视口——这不是 bug，是 flex 布局在不同方向下的必然行为。
下拉菜单触发器靠右，但弹出层仍偏左？别乱加 dropdown-menu-right
Bootstrap 5 已废弃 dropdown-menu-right，正确类名是 dropdown-menu-end。但它只在结构合规时生效：
-
.dropdown必须和.navbar-nav并列，放在<div class="collapse navbar-collapse">内部，不能嵌套在<ul class="navbar-nav">里 - 包裹
.dropdown的外层要加d-flex ms-auto，否则dropdown-menu-end的“右对齐”基准是整个 navbar 宽度，不是按钮本身 -
.dropdown-menu必须是.dropdown的直接子元素，中间不能有额外<div>
真正容易被忽略的是容器层级：Navbar 的 flex 流分三层——品牌区、折叠容器、独立右对齐区。混用这三层，或者强行用文本对齐类干预 flex 行为，几乎必然失败。
