根本原因是.form-control的width:100%与父容器缺乏flex约束导致盒模型溢出，必须用input-group配合flex-grow-1、min-width:0和flex-shrink-0实现弹性收缩。
搜索框在小屏下撑出滚动条或被截断
这不是“太长”，而是 .form-control 的 width: 100% 和父容器缺乏 flex 约束共同导致的盒模型溢出。你手动设 max-width: 200px 或删掉 width，只是临时压住表象，下次换设备或内容变多就又破了。
- 根本原因：导航栏（
.navbar）是 flex 容器，但.form-control默认没设min-width: 0，flex 会优先按内部文字+padding+border 的实际宽度撑开，尤其小屏下极易突破边界 - 错误结构：
<li><input class="form-control"></li>——li默认flex-shrink: 0，input又强制占满，整块被撑宽 - 别用
.col-*包裹：导航栏不是 grid 容器，这些类完全不生效
必须用 input-group + flex-grow-1 + min-width: 0
唯一可靠解法是让搜索框「弹性收缩」而非「强制占满」。关键不在限制宽度，而在重置 flex 容器对最小宽度的计算逻辑。
- 外层必须用
<div class="input-group flex-nowrap">：它自带 <code>d-flex和合理box-sizing -
<input class="form-control flex-grow-1">必须加内联样式style="min-width: 0;"—— 这是触发收缩的核心，缺一不可 - 右侧按钮（如
<button class="btn"></button>）要加flex-shrink-0，否则会被压缩变形 - Bootstrap 4 用户注意：
.form-control还带display: block，和 flex 天然冲突；Bootstrap 5 虽移除了它，但不加min-width: 0仍无法真正收缩
<div class="input-group flex-nowrap"> <input type="search" class="form-control flex-grow-1" style="min-width: 0;" placeholder="搜索"><button class="btn btn-outline-secondary flex-shrink-0">?</button> </div>
搜索框放在 navbar-collapse 外面就注定失效
很多人把搜索框写在 <nav></nav> 下直接子级，比如紧挨着 .navbar-brand，结果小屏折叠后它就彻底消失——不是隐藏，是压根没进响应式控制流。
- 正确位置：必须作为独立
<li class="nav-item">，和其他导航项平级，且完整包裹在<div class="navbar-collapse collapse"> 内部 <li>想靠右？用 <code>ms-auto（BS5）或ml-auto（BS4），别用float-right—— 它在 flex 容器里无效 - 如果坚持放外面（比如始终可见），得手动处理 iOS 键盘遮挡：加
me-2防 viewport overflow，否则 Safari 可能直接失焦或弹不出键盘 - 检查
.input-group外层有没有意外加了margin或padding—— 它内部已有 spacing，叠加会导致错位 - 确认没对
.form-control单独写width: 100%或w-100类，它会和flex-grow-1冲突 - 查看 Computed 面板，确认
.input-group确实是display: flex，且父容器没有overflow: hidden或position: absolute把它裁掉 - 如果用了自定义图标字体（如
bi-search），确保引入了bootstrap-icons.css；否则图标不显示，可能误判为“按钮没占位”而调宽 input
为什么改了还是没变短？几个硬坑要盯住
DevTools 里看到 min-width: 0 已生效，但视觉上还是宽，大概率是以下某个地方卡住了：
min-width 如何参与收缩决策，以及哪些类会悄悄覆盖它。漏掉任何一个，都会让整个弹性逻辑失效。
