导航栏在小屏幕下文字断行、对齐崩坏、下拉菜单凭空消失……这些问题看着像 CSS 的“玄学”，其实根子都在几个最基础的属性上。下面把常见场景和修复思路拆开聊，每个都附上代码层面的关键操作。
导航项文字在窄屏里断行错位
根本原因其实不复杂：white-space 缺了，浏览器就在空格处强行折行。比如“产品中心”会被切成“产品”和“中心”两行，高度突然变高，对齐全乱。这不是内容问题，是默认渲染行为。
- 每个导航链接（
.na v-link）必须设white-space: nowrap，否则文字内部会断开 - 检查父容器
.na v-item有没有设flex-wrap: wrap——这个属性在单行导航里完全是多余的，会让子项主动换行，破坏水平流，果断移除 - 如果链接里还混了图标，用
display: flex; align-items: center代替纯 inline 布局，避免 baseline 对齐带来的高度抖动
小屏下导航整体换行后下拉菜单定位失效
一旦某个 .na v-item 因为空间不足被 flex-wrap: wrap 换到第二行，它的子级下拉菜单（.dropdown-menu）如果还依赖外层 .na vbar 的 position: relative，位置就彻底乱了——菜单会悬空在原处，而不是跟在当前项旁边。
正确做法是把 position: relative 加在每个可展开的 .na v-item 上，让下拉菜单始终相对于它自身定位。
- 每个可能弹出下拉菜单的
.na v-item都要设position: relative .dropdown-menu用position: absolute，top/left基于该.na v-item- 别给最外层
.na vbar设overflow: hidden，它会裁掉换行后的下拉区域
长英文/URL 导致导航项撑破容器
中文一般没事，但像“documentation”或“https://example.com/api/v2/long-path”这种无空格字符串，一旦加了 white-space: nowrap，就会硬生生把导航栏撑宽，造成横向滚动或溢出。
解决方案是仅对可能出问题的文本容器启用断词，而不是全局加 word-break: break-all。
- 移动端通过
@media (max-width: 768px)单独控制：overflow-wrap: break-word+word-break: break-all - 桌面端保持
word-break: normal，保证可读性 - 避免对按钮、标题类文本用
break-all，会切碎单词影响识别
断点值抄别人导致适配失效
768px 是常见断点，但你的导航菜单里有 7 个字的项，实际开始挤压的临界宽度可能只有 540px。抄来的断点只是参考，不是标准。
打开浏览器 DevTools，手动缩窄窗口，观察导航何时开始高度变化或文字重叠，记下那个像素值——这才是你的真实断点。
- 断点用
max-width（不是min-width），符合从大到小的响应逻辑 - 一个导航栏通常只需 1 个有效断点；多断点容易互相覆盖，维护成本高
- 如果换行后仍然拥挤，优先考虑改交互（比如切换为汉堡菜单），而不是硬塞更多行
真正麻烦的不是写几行 CSS，而是不同语言、不同字体加载时机、不同设备对 white-space 和 word-break 的实现差异。哪怕同一段代码，在 iOS Safari 和 Android Chrome 里断行位置都可能不一样——所以测试时务必多设备验证。
