应避免直接在.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 单位 + 局部作用

只对纯文字导航项生效，避开交互组件干扰：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 写一个自定义类，比如 .nav-title，加在 <a class="nav-link nav-title"></a> 上
• 样式里用 letter-spacing: 0.03em（不是 px，避免小屏过重）
• 必须同步调 line-height，例如设为 line-height: 1.4，否则字松了但行距没变，视觉发空
• 中英文混排时，把英文单独包一层 <span class="en-only">EN</span>，再单独设 .en-only { letter-spacing: 0.02em; }

移动端要收紧，别忘了媒体查询

大屏宽松可读，小屏反而需要更紧凑的间距防止断词和溢出：

• 在 <style></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 —— 折叠后会留下奇怪的水平空白

真正难的是平衡：加宽一点提升高级感，加多一点就让导航失去扫描效率；单位用错一次，小屏上整条菜单就糊成色块。你调的不是数字，是用户第一眼扫过去的呼吸感。