根本原因是white-space缺失导致文字在空格处断行，必须为每个导航链接设white-space: nowrap，同时移除.nav-item上的flex-wrap: wrap，并为每个.nav-item加position: relative以确保下拉菜单正确定位。
导航项文字在窄屏里断行错位
根本原因是 white-space 缺失，导致浏览器在空格处强行折行，单个菜单文字（比如“产品中心”）被切成“产品
中心”，高度突变、对齐崩坏。这不是内容问题，是默认渲染行为。
给每个导航链接加 white-space: nowrap，同时确保父容器（如 .nav-item）没设 flex-wrap: wrap —— 后者在单行导航里是冗余且有害的。
-
.nav-link必须设white-space: nowrap，否则文字内部会断开 - 移除
.nav-item上的flex-wrap: wrap，它会让子项主动换行，破坏水平流 - 若链接含图标，用
display: flex; align-items: center替代纯 inline 布局，避免 baseline 对齐引发高度抖动
小屏下导航整体换行后下拉菜单定位失效
一旦 .nav-item 因空间不足被 flex-wrap: wrap 换到第二行，其子级下拉菜单（.dropdown-menu）若依赖外层 .navbar 的 position: relative，就会脱离原位置悬空。
正确做法是把 position: relative 加在每个可展开的 .nav-item 上，让下拉菜单始终相对于它自身定位。
- 每个
.nav-item都要设position: relative -
.dropdown-menu用position: absolute，top/left 基于该.nav-item - 别给最外层
.navbar设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 个有效断点；多断点容易互相覆盖，难维护
- 如果换行后仍拥挤，优先考虑改交互（比如切换为汉堡菜单），而不是硬塞更多行
white-space 和 word-break 的实现差异。哪怕同一段代码，在 iOS Safari 和 Android Chrome 里断行位置都可能不一样。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
