因为 .nav 默认 display: block，非 flex 容器，justify-content-between 仅对 display: flex 生效；须加 d-flex 激活 flex 布局。
为什么直接加 justify-content-between 在 .nav 上没反应
因为 Bootstrap 的 .nav 默认不是 Flex 容器——它只是普通 ul，display: block。所有 justify-content-* 类只对已启用 Flex 的父容器生效，加在非 Flex 元素上等于白写。
必须显式加 d-flex 才能激活 Flex 布局：
- 别用
.navbar替代.nav后就省掉d-flex：Bootstrap 的.navbar默认是 Flex，但它的子元素是.navbar-nav，不是直接放.nav-item - 如果用了
.navbar-nav，要对齐的是它内部的.nav-link，那得确保.navbar-nav是 Flex 容器（它默认是），再在其上加justify-content-between - 检查浏览器开发者工具里
computed标签页，确认display确实是flex，否则一切对齐类都无效
三个导航项用 justify-content-between 为什么中间那个看起来偏右
这不是 bug，是 flex 标准行为：justify-content-between 只把「项目之间的空隙」均分，不控制项目自身宽度或周围空白。三项目 → 两个间隙 → 每个间隙等宽，但「首页」「联系我们」「退出」字数不同、渲染宽度不同，人眼自然觉得中间项右偏。
- 想视觉真正均匀，改用
justify-content-evenly（Bootstrap 5.3+ 支持）：首项前、项间、末项后间隙全部等宽 - 若用旧版 Bootstrap 或需兼容，可手动给每个
.nav-item加flex: 1+text-center，强制等宽分配 - 避免给
.nav-item设固定width或min-width，会挤压间隙计算空间
移动端适配时 justify-content-between 突然失效
小屏下常见失效原因是容器总宽度小于所有导航项宽度之和，flex 没有“剩余空间”可分配，between 自动退化为 start（左对齐）。
- 检查是否在小屏下给
.nav-item加了w-100或flex-grow-1，导致换行或撑满整行 - 响应式写法推荐：用
justify-content-sm-start justify-content-md-between，小屏左对齐、中屏起才两端对齐 - 别在
.nav上同时设min-width和justify-content-between，前者可能锁死 flex 计算逻辑 - 如果导航项文字过长，加
text-truncate防止溢出破坏布局
按钮和文字在同一行两端对齐，别套 .row
最常踩坑的写法是：<div class="row justify-content-between">
<div class="col">标题</div>
<div class="col"><button>操作</button></div>
</div>。问题在于 .col 有默认 padding（gutter），且 .row 的 flex 主轴受列宽干扰，对齐位置不准。
- 正确做法：用纯 flex 容器，绕过 grid 系统干扰：
<div class="d-flex justify-content-between align-items-center"> <span>标题</span><button class="btn btn-primary">操作</button> </div> -
align-items-center很关键——否则文字基线和按钮底部不对齐，看起来像“错位” - 如果右侧需要多个按钮，用
ms-auto推到最后：<div class="d-flex align-items-center"> <span>标题</span><div class="ms-auto"> <button>保存</button><button>取消</button> </div> </div>
真正容易被忽略的点是：flex 对齐永远只作用于**直接子元素**，任何嵌套层级都会中断效果；另外，只要容器没有剩余空间（哪怕只差 1px），justify-content-between 就不会拉开间距——它不“强制拉伸”，只“分配空隙”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
