直接给.navbar-brand加mx-auto无效，因为.navbar是display:flex容器且默认justify-content:flex-start，.navbar-brand作为首子元素自带margin-inline-end:auto，本意是推远右侧元素而非居中，当存在.navbar-nav等兄弟元素时该auto margin被挤压失效。
直接给 .navbar-brand 加 mx-auto 为什么无效
因为 .navbar 是 display: flex 容器，且默认 justify-content: flex-start；.navbar-brand 作为第一个子项，天然被“钉”在左侧。它自带的 margin-inline-end: auto（v5）或 margin-right: auto（v4）本意是推远右侧兄弟元素，不是居中——当旁边有 .navbar-nav 或 .navbar-toggler 时，这个 auto margin 就被挤压失效。
常见错误包括：
- 给 .navbar-brand 单独加 text-center：父容器没设 width: 100%，无效
- 在小屏折叠后发现 logo 偏移：结构变化导致 flex 排列逻辑改变，auto margin 失去前提条件
- 用 margin: 0 auto 硬写 CSS：破坏响应式，移动端仍保留该值，可能挤出汉堡按钮
让 .navbar-brand 居中的可靠三栏结构
必须让 .navbar-brand 处于两个同级 .navbar-nav 之间，浏览器才认可它是可居中项。三者必须是 .navbar 的直系子元素。
-
<div class="navbar-nav me-auto"></div>—— 占位左侧，把内容推到最左 -
<div class="navbar-brand mx-auto">MyLogo</div>—— 放中间，此时mx-auto才真正生效 -
<div class="navbar-nav ms-auto"></div>—— 占位右侧，防止 logo 被导航项挤偏
注意：
- 不要给 .navbar-brand 加 flex-grow-1，它会撑满整行，右侧导航消失
- 折叠态（offcanvas）下需额外处理：<div class="offcanvas-body justify-content-center">，并从 .navbar-nav 上移除 flex-grow-1
调整 Logo 和菜单之间的间距，别碰 margin
硬加 margin-right 到 .navbar-brand 或 margin-left 到 .navbar-nav 会导致小屏错位、汉堡按钮被顶出可视区。正确做法是用 Bootstrap 内置间距类控制语义化间隙：
- 给
.navbar-brand加me-3（v5）或mr-3（v4）：右侧留出 1rem 间距 - 给紧邻的
.navbar-nav加ms-3（v5）或ml-3（v4）：左侧留出 1rem，语义更清晰 - 需要响应式？用
me-md-4 me-lg-5，小屏收窄、大屏放宽
⚠️ 注意：me-* 类必须写在 .navbar-brand 上，而不是父 .navbar；否则整个导航栏右移，破坏对齐。
图片 Logo 垂直不对齐、看起来偏上怎么办
默认 <img> 在 .navbar-brand 中是 vertical-align: baseline，文字基线对齐导致视觉下沉，整体像“左边空、右边挤”。
解决方法很简单：
- 给图片加 align-middle 类（v4/v5 都支持）
- 或统一用自定义 CSS：.navbar-brand img { vertical-align: middle; }
- 若图标尺寸和文字字号差异大，建议加：height: 1.5rem; object-fit: contain; 避免拉伸变形
- 同时重置文字行高：.navbar-brand { line-height: 1; }，防止基线留白
容易被忽略的是：这些对齐问题在桌面端可能不明显，但一旦进入小屏折叠态，.offcanvas-body 变成垂直堆叠，align-middle 失效，必须配合 justify-content-center 和显式高度才能稳定居中。
