应将导航条容器设为flex并用me-auto/ms-auto分离左右菜单，而非仅对.navbar-nav用justify-content-between；Bootstrap 5中正确做法是结构分离+工具类组合，确保响应式稳定。
导航菜单用 justify-content-between 但中间还是挤在一起？
直接加 justify-content-between 到 .navbar-nav 容器上，通常不管用——因为默认的 .navbar-nav 是行内块级表现，且子项（.nav-item）没设宽或 flex 基础属性，Flex 布局根本没生效。
真正起作用的是把整个导航条容器设为 flex，并让左右两组菜单有明确“锚点”：
- 给
.navbar或外层.container加display: flex和justify-content: space-between - 把左侧菜单（如 logo、首页）和右侧菜单（如登录、设置）拆成两个独立的
.navbar-nav，分别加mr-auto和ml-auto（Bootstrap 4）或me-auto/ms-auto（Bootstrap 5） - 中间留白本质是“左右撑开”，不是给中间加空
<li>——后者响应式下极易错位、无法对齐
Bootstrap 5 中正确写法（无 JS、纯 HTML/CSS）
关键在结构分离 + 工具类组合。下面这段能稳定实现：左侧品牌、中间空白、右侧导航项靠右对齐：
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<pre class="brush:php;toolbar:false;"><!-- 左侧占位（可选），确保品牌不被挤 -->
<div class="navbar-nav me-auto"></div>
<!-- 右侧导航项 -->
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#">首页</a>
<a class="nav-link" href="#">关于</a>
<a class="nav-link" href="#">联系</a>
</div>
注意：me-auto 让左侧空 div 吸附到右边，ms-auto 让右侧菜单吸附到最右，中间自然留白。如果不需要左侧占位，直接删掉那个空 <div class="navbar-nav me-auto"></div>，只留 ms-auto 也行——但此时品牌和右侧菜单之间距离由 .navbar-brand 的 margin 决定，可能不够“居中留白”感。
为什么不用 justify-content-center + 伪元素撑开？
有人试过给 .navbar-nav 加 justify-content-center，再用 ::before/::after 伪元素设 flex: 1 撑开左右——这在小屏幕折叠时会出问题：折叠按钮（.navbar-toggler）位置错乱，且移动端菜单弹出后内部项仍受伪元素影响，对齐异常。
更稳妥的做法是放弃“单个导航容器居中撑开”的思路，转而用 Bootstrap 原生的 auto-margin 机制（me-auto/ms-auto）控制流向。它天然适配 navbar-expand-* 断点，折叠后所有项自动堆叠，无需额外 media query 修复。
自定义中间宽度？用 flex-grow 或固定 width
如果需要中间留白精确到 200px 或随屏幕变化，别碰 justify-content，改用：
- 在两个
.navbar-nav之间插入一个空<div class="flex-grow-1"></div>（Bootstrap 5），它会吃掉所有剩余空间 - 或者用
<div style="width: 200px"></div>替代，但注意响应式断点下可能需配合d-none d-lg-block - 避免给
.nav-item设margin-left/right模拟留白——这样每项都带间隙，缩放或换字体时容易溢出容器
中间留白不是视觉装饰问题，而是 flex 流向控制问题。一旦开始手动加 margin、伪元素或空标签，就等于绕开了 Bootstrap 的布局契约，后面调折叠菜单、对齐图标、适配 RTL 时都会冒出意料之外的偏移。
