两端对齐导航菜单需用justify-content-between并确保.nav为flex容器：1. 给加d-flex justify-content-between；2. 将navbar-brand和navbar-nav作为同级子元素；3. 避免误写id含#导致js失效。
两端对齐的导航菜单在 bootstrap 中不能靠 text-center 或手动加 margin-left: auto 实现，核心是利用 flex 布局语义和正确的容器嵌套结构。
用 .justify-content-between 实现 logo 左、菜单右的硬对齐
这是最直接、最可控的方式，适用于非折叠状态（即大屏下 navbar 展开时）。
- 把
<nav></nav>设为 flex 容器（.navbar默认就是），内部不套.navbar-nav作为唯一子容器 - 将品牌部分（如
<a class="navbar-brand"></a>）和导航菜单（<ul class="navbar-nav"></ul>）作为同级子元素放入<nav></nav> - 给
<nav></nav>加.justify-content-between，它会自动把第一个子项推左、最后一个子项推右 - 如果菜单项太少显得松散，可在
.nav-link上加px-3或mx-2控制间距
用 .ms-auto 把特定导航项推到最右侧
适合在已有 .navbar-nav 结构中，只让某几个链接（比如登录/头像下拉）靠右，其余保持左对齐。
-
.navbar-nav默认是 flex 行内容器，宽度由内容决定 —— 所以直接给某个<li>加.ms-auto不生效 - 必须先让
.navbar-nav占满整行：加.w-100或.flex-fill - 再给要右对齐的第一个
<li class="nav-item">加.ms-sm-auto（推荐带断点，避免小屏错位） - 注意：不要给整个
<ul></ul>加.ms-auto，否则整组菜单右移，logo 就悬空了
移动端折叠后，如何让汉堡菜单里的链接居中？
别用 text-center —— .navbar-nav 是 flex 容器，text-align 对它无效。
- 给
.navbar-collapse内部的<ul class="navbar-nav"></ul>加.d-flex .flex-column .align-items-center - 如果链接文字太挤，加
.py-2或统一设.nav-link { padding: 0.5rem 1rem; } - 确保没漏掉
data-bs-toggle="collapse"和匹配的data-bs-target="#id"，否则折叠区根本不显示 - 检查
id值是否误写成#navbarSupportedContent（带 # 符号）——这会导致 JS 找不到目标，菜单空白
为什么加了 .nav-justified 没反应？
.nav-justified 只对基础 .nav（非 navbar 内部）有效，且仅在 ≥768px 时强制等宽，小屏堆叠。它不适用于 .navbar-nav。
- 如果你在
<nav class="navbar"></nav>里写了<ul class="nav nav-pills nav-justified"></ul>，它会失效 —— 因为.navbar-nav的样式优先级更高，覆盖了.nav-justified的 flex 设置 - 想在 navbar 里实现类似效果，得手动用
.w-100+.nav-item { flex: 1; }，但响应式行为需额外处理 - 更稳妥的做法是放弃
.nav-justified，改用上面提到的.justify-content-between或.ms-auto组合
最容易被忽略的是：所有对齐类都依赖正确的 DOM 层级和 Bootstrap JS 初始化。少一个 data-bs-toggle，或中间多一层 <div> 包裹 <code>.dropdown-menu，对齐就会彻底失效 —— 这不是 CSS 没加载，而是定位逻辑根本没触发。
