bootstrap 5 中 navbar-nav 添加 justify-content-center 类可实现导航项居中；bootstrap 4 需用 mx-auto 配合 flex 布局，注意断点与 collapse 嵌套关系，避免样式失效。
导航条内联元素默认左对齐，justify-content-center 是最直接解法
Bootstrap 5 的 navbar 基于 Flexbox，默认 justify-content: flex-start，所以所有子项靠左。想居中，只需在 navbar 或其容器（如 navbar-nav）上加 justify-content-center 类。
注意：该类仅在 Bootstrap 5+ 中有效；Bootstrap 4 需手动补 CSS 或用 mx-auto + 宽度控制。
- 推荐加在
navbar-nav上，避免影响品牌 logo 和右侧组件（如登录按钮） - 若整个
navbar（含 logo、菜单、工具栏）都要居中，才加在navbar根元素上 - 确保没有其他类（如
justify-content-between）与之冲突，后者会覆盖居中效果
mx-auto + navbar-nav 宽度控制，兼容 Bootstrap 4
Bootstrap 4 没有 justify-content-center 对应的 flex 工具类，但可用 mx-auto 让 navbar-nav 自动居中——前提是它有明确宽度或设为 display: inline-flex。
常见写法：
<div class="navbar-nav mx-auto"> <a class="nav-link" href="#">首页</a> <a class="nav-link" href="#">关于</a> </div>
-
mx-auto本身不生效，除非父容器是 flex 容器且子项非flex: 1；因此需确认navbar根元素有display: flex（Bootstrap 4 默认已有） - 如果导航项太多导致换行，
mx-auto仍居中整块，但视觉上可能偏左——此时应限制navbar-nav最大宽度，或改用媒体查询分断点处理 - 不建议给
navbar-nav设固定宽（如w-75），易在小屏溢出；优先用flex-fill或响应式类组合
响应式场景下居中失效？检查 navbar-expand-* 断点
Bootstrap 导航条在小屏折叠、大屏展开时行为不同。navbar-expand-md 表示「在 md 及以上才展开为一行」，否则收为汉堡菜单。一旦折叠，navbar-nav 被包裹进 collapse，justify-content-center 就只作用于折叠后的垂直列表，而非顶部横排布局。
- 居中逻辑只应在展开态生效，所以类必须加在
navbar-nav内部（即collapse容器里），而非外层navbar - 若希望折叠后下拉菜单也居中，需额外给
.dropdown-menu加left: 50%+transform: translateX(-50%)，但原生 Bootstrap 不支持，得手写 CSS - 用浏览器 DevTools 检查实际生效的类和 computed styles，常发现
navbar-collapse的display为none或block，导致 flex 居中类未触发
自定义 CSS 干预时，!important 很可能暴露了选择器权重问题
有人试过加 text-align: center 或 margin: 0 auto 无效，最后靠 !important 强行覆盖——这说明没理解 Bootstrap 的 flex 结构层级。
-
text-align: center对 flex 子项无效，它只影响 inline 元素的文本对齐，别乱用 - 真正要覆盖的是
navbar-nav的justify-content，优先级不够时，用更具体的选择器，比如.navbar .navbar-nav，而不是无差别加!important - 若用了 Sass 自定义主题，直接在
$navbar-nav-link-padding-x等变量里调整，比后期 hack 更可持续
