直接加justify-content:center会破坏响应式结构，因它将.navbar-toggler和.navbar-brand一同居中，导致小屏下按钮错位、无障碍失效，且折叠态时.navbar-collapse变为block使该属性完全失效；正确方案是用me-auto/ms-auto构建左-中-右三栏结构，并配合媒体查询处理小屏居中。
为什么直接加 justify-content: center 会破坏响应式结构
因为 .navbar 默认是 display: flex 容器，且 justify-content: flex-start。强行改全局居中，会把 .navbar-toggler（折叠按钮）和 .navbar-brand 一起拉到中间，小屏下 toggle 按钮就偏离左上角标准位置，导致点击区域错位、无障碍访问失败。
更关键的是：折叠态下 .navbar-collapse 变成 display: block，flex 布局完全失效，此时 justify-content 根本不生效，反而让大屏/小屏样式逻辑割裂。
- 不要在
.navbar上直接覆盖justify-content - 不要依赖
text-center对 flex 子项起作用——它只影响内联内容对齐 - 必须承认：Bootstrap 5 的
.navbar不是为“绝对居中 logo”设计的，得用语义化三栏结构补位
用 me-auto + ms-auto 构建可居中的三栏语义结构
这是唯一能兼顾大屏居中、小屏折叠、JS 交互兼容的原生方案。核心是把导航栏拆成「左导航—品牌区—右导航」三个同级 div，靠 flex 的 margin 自动分配空间。
结构必须严格满足：
- 左侧容器带
class="navbar-nav me-auto"（哪怕为空） -
.navbar-brand单独作为中间节点，不加任何 margin 类 - 右侧容器带
class="navbar-nav ms-auto"（同样可空） - 三者必须是
.navbar的直接子元素，不能嵌套在额外div里
示例片段：
<nav class="navbar navbar-expand-lg"><div class="container-fluid">
<div class="navbar-nav me-auto"></div>
<a class="navbar-brand" href="#">Logo</a>
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#">首页</a>
<a class="nav-link" href="#">关于</a>
</div>
</div>
</nav>
小屏折叠后 .navbar-brand 偏左？用媒体查询重置显示模式
折叠时 .navbar-collapse 渲染为块级，me-auto/ms-auto 失效，.navbar-brand 退化为普通行内元素，默认左对齐。
解决方案不是修 .navbar-collapse，而是单独控制 .navbar-brand 在断点内的行为：
- Bootstrap 5 默认断点是
lg（992px），媒体查询写@media (max-width: 991.98px) - 给
.navbar-brand加display: block; margin: 0 auto; text-align: center; - 若
.navbar-brand是图片，务必设height或max-width: 100%，否则窄屏下溢出 - 别给
.navbar-collapse加text-center——它是 flex 容器，文本对齐无效
折叠菜单里的链接怎么水平居中？别碰 text-align
很多人在 .navbar-collapse 上加 text-center，发现链接纹丝不动。这是因为 .navbar-nav 是 flex 容器，子项（.nav-link）的对齐由 justify-content 控制，不是文本对齐。
正确做法分两步：
- 先确保
.navbar-nav在折叠态下是块级容器（默认就是），再让它内部 flex 居中：.navbar-collapse .navbar-nav { justify-content: center; } - 但注意：这个规则必须放在
@media (max-width: 991.98px)内，避免影响大屏展开态 - 如果用了
.navbar-nav多层嵌套（比如套了<div class="d-flex">），flex 上下文会被打断，需检查 computed styles 中 <code>justify-content是否真正生效最易被忽略的一点：所有自定义 CSS 必须在 Bootstrap CSS 之后加载，否则工具类的 flex 属性会被覆盖，整个布局链就断了。
