应避免直接在.nav-link上设置letter-spacing，而应使用语义类.nav-title配合em单位、同步line-height、英文单独包裹.en-only、移动端媒体查询收紧间距，并通过padding/margin调整横向距离。
直接给 .nav-link 加 letter-spacing 会出问题
别在 .nav-link 上硬写 letter-spacing: 0.05em —— 尤其当它包裹图标、徽章或响应式字体时，容易导致文字与图标错位、光标偏移（Safari 最明显），或者小屏下字母挤成一团。Bootstrap 没封禁这个属性，但它不负责协调渲染副作用。
正确做法：用语义类 + em 单位 + 局部作用
只对纯文字导航项生效，避开交互组件干扰：
- 写一个自定义类，比如
.nav-title，加在<a class="nav-link nav-title">上 - 样式里用
letter-spacing: 0.03em（不是 px，避免小屏过重） - 必须同步调
line-height，例如设为line-height: 1.4，否则字松了但行距没变，视觉发空 - 中英文混排时，把英文单独包一层
<span class="en-only">EN</span>，再单独设.en-only { letter-spacing: 0.02em; }
移动端要收紧，别忘了媒体查询
大屏宽松可读，小屏反而需要更紧凑的间距防止断词和溢出：
- 在
<style>或 SCSS 中加： @media (max-width: 575.98px) { .nav-title { letter-spacing: -0.01em; line-height: 1.35; } }- 千万别用
!important覆盖 Bootstrap 默认的font-size或padding，那会破坏整个导航栏的垂直节奏
想调菜单项之间的横向距离？别碰 letter-spacing
那是 padding 或 margin 的事，不是字符间距的问题：
- 加大点击热区：用
py-2或py-3（不是px-*），确保上下内边距 ≥ 0.5rem - 横向留白：给
.nav-link加px-3，或更稳妥地用margin-inline: 0.75rem（兼容 RTL） - 别在
.nav-item上加mx-2—— 折叠后会留下奇怪的水平空白
