导航栏子项小屏下意外换行主因是.nav-item默认min-width: auto阻止收缩，须显式设min-width: 0，并避免width/flex-basis覆盖响应式逻辑；搜索框需用input-group包裹且input加min-width: 0，折叠菜单高度应按项数合理设置max-height。
导航栏子项在小屏下意外换行
这不是内容太多，而是 .navbar-nav 的 flex 项（.nav-item）默认不收缩，哪怕你写了 flex-grow-1 或 w-100，只要没设 min-width: 0，它就会按内部文字+图标+padding 去撑开宽度，一超过容器就强制折到下一行。
常见表现：手机上原本该横排的菜单突然变成两行，品牌 logo 被挤到第二行，或搜索框和右侧按钮错位。
- 检查 DevTools 的 Computed 样式，确认
.nav-item是否继承了min-width: auto（这是浏览器默认值，会阻止收缩） - 给
.nav-item加min-width: 0—— 这是触发弹性收缩的前提，不是可选项 - 避免对
.nav-item单独设width或flex-basis，这会覆盖 Bootstrap 的响应式逻辑 - 如果用了
.dropdown，确保.dropdown-menu没用position: absolute错误地脱离了父容器流（它本该相对.nav-item定位）
搜索框撑破导航栏引发连锁换行
.form-control 的 width: 100% 在 .navbar 的 flex 环境里是个“假全宽”：它只占父容器剩余空间，但一旦内容变长（比如 placeholder 文字多、中文字体渲染宽），又没约束最小宽度，就会把整个 .nav-item 撑宽，连带其他项被挤下去。
正确结构必须用 input-group 包裹，并配合三要素：
<div class="input-group flex-nowrap"> —— 外层容器必须是 <code>input-group，它自带d-flex和合理box-sizing-
<input class="form-control flex-grow-1" style="min-width: 0;">——flex-grow-1吃空间，min-width: 0才让它真能缩 - 右侧按钮加
flex-shrink-0，否则小屏下按钮会被压扁或消失 - 整个
input-group必须放在<div class="collapse navbar-collapse"> 内部，和其他 <code>.nav-item平级；放外面会导致折叠后悬空折叠菜单展开后高度不足，间接导致视觉换行
折叠态下
.navbar-collapse.show的max-height是固定值，如果设太小，菜单项会被截断，看起来像“只显示了一半”，甚至让最后一项被切掉——此时你误以为是换行问题，其实是高度不够，内容根本没完全展开。- 别用
max-height: none或100vh，前者禁用动画，后者在低端机上易卡顿 - 按实际项数估算：
.nav-link默认高度约 48px（含 padding + line-height），6 项就设max-height: 320px，再加 20px 余量 - 同时检查
.nav-link的padding是否在小屏下过小（如仅py-1），导致文字贴顶，视觉上像“没对齐” - 如果用了
.navbar-brand图片，记得加line-height: 1，否则padding会被行高干扰，造成上下错位
自定义断点改错位置，让导航栏“不该换的时候换了”
有人想把折叠临界点从
navbar-expand-lg（≥992px 展开）微调到 850px，就自己写@media (max-width: 850px)去 hide.navbar-nav。结果是：汉堡图标点了没反应，或者菜单弹出瞬间又收起。因为 Bootstrap JS 不读你的媒体查询，它只认
navbar-expand-*类是否存在来初始化 toggle 逻辑。- 想 820px 折叠？直接换用
navbar-expand-lg即可——它在 ≤991.98px 就折叠，820px 自然生效 - 删掉
navbar-expand-lg却保留navbar-toggler，JS 根本不绑定事件，点击无效 - 手动覆盖
min-width或display会破坏data-bs-toggle="collapse"的 DOM 绑定链
真正影响换行的，从来不是“屏幕多宽”，而是你选的
navbar-expand-*类是否匹配当前视口，以及所有子项是否满足 flex 收缩的基本条件：min-width: 0、无强制宽度、结构嵌套正确。 - 别用
