搜索框在小屏下被截断或撑出滚动条，根本原因是.form-control的width:100%与父容器缺乏flex约束导致盒模型溢出；需用input-group包裹并设flex-nowrap、input加flex-grow-1和min-width:0、按钮加flex-shrink-0。
搜索框在小屏下被截断或撑出滚动条
这不是 width 写少了，而是 .form-control 的 width: 100% 和父容器缺乏 flex 约束共同导致的盒模型溢出。默认情况下，.navbar 是 flex 容器，但子项若没设 min-width: 0，flex 会按内容（含 padding + border）撑开 —— 尤其是小屏下，文字+图标+内边距直接突破容器边界。
必须用 input-group 包裹，并配合三个关键点：
<div class="input-group flex-nowrap">：外层加 <code>flex-nowrap防止按钮换行-
<input class="form-control flex-grow-1" style="min-width: 0;">：flex-grow-1吃剩余空间，min-width: 0是触发收缩的关键，缺它必溢出 - 右侧按钮加
flex-shrink-0，避免被压缩变形 - 整个
input-group必须作为<li class="nav-item">的子元素，和其他导航项平级 - 想靠右？用
ms-auto（BS5）或ml-auto（BS4），别用float-right—— 它在 flex 容器里无效 - 错误结构：
<nav class="navbar"><div class="navbar-brand"></div> <input></nav>—— 这个input根本不受折叠逻辑控制 - 外层
input-group是否有flex-nowrap - 按钮是否有
flex-shrink-0（Bootstrap 5）或style="flex-shrink: 0;"（手动补） - 是否误把
form元素当容器加了width: 50%—— 这会让它只占一半空间，ms-auto就没“剩余空间”可吞，右对齐失效
Bootstrap 4 和 5 的 form-control 行为差异
Bootstrap 4 的 .form-control 默认带 display: block，放进 .navbar-nav > li 这类 flex 子项里几乎必出问题；Bootstrap 5 移除了 display: block，更适配 flex 布局，但仍需 min-width: 0 才能真正响应收缩。
别指望 .col-* 类生效 —— .navbar 不是 grid 容器，这些类完全不参与布局计算。
如果你还在用 Bootstrap 4，不要手动写 style="width: auto; max-width: 200px;" 这类兜底，优先升级到 input-group + d-flex + w-100 组合，并确保父元素是 flex 容器。
搜索框在折叠菜单中消失或错位
搜索框不在 .navbar-collapse 内部，或者用了 float: right / position: absolute，就会脱离响应式控制流。它不会随汉堡菜单展开/收起，而是悬在页面顶部不动，或在小屏下完全不可见。
正确做法只有一条：
宽度“看起来对了”，但右侧按钮错位或换行
常见于没加 flex-nowrap 或按钮漏了 flex-shrink-0。Flex 容器默认允许子项换行，而按钮如果没有显式禁止收缩，小屏下会被压扁甚至文字溢出。
检查以下三点：
真正卡住人的，往往不是怎么写 CSS，而是没意识到 min-width: 0 是 flex 收缩的开关，也没确认搜索框是否在 .navbar-collapse 的 DOM 流内部。
