搜索框在小屏下异常的根本原因是.form-control的width:100%与父容器缺乏flex约束导致盒模型溢出，必须用input-group配合flex-grow-1、min-width:0和flex-shrink-0实现弹性收缩。
搜索框在小屏下被截断、撑出横向滚动条，或右侧按钮错位，根本不是 width 写少了，而是 .form-control 的 width: 100% 和父容器缺乏 flex 约束共同导致的盒模型溢出。必须用 input-group + flex 收缩逻辑重置最小宽度，否则任何 max-width 或 px 限定都是临时补丁。
为什么直接写 width: 100% 在导航栏里会失效
Bootstrap 的 .form-control 默认带 width: 100%，但导航栏（.navbar）是 flex 容器，子项若没显式设 min-width: 0，flex 会按内容撑开——哪怕你写了 100%，它也会优先满足内部文字+padding+border 的实际宽度，尤其在小屏下极易突破容器边界。
-
.navbar-nav > li > input这种嵌套结构最危险：li 默认flex-shrink: 0，input 又强制占满，结果整个 li 被撑宽 - Bootstrap 4 的
.form-control还带display: block，和 flex 布局天然冲突；Bootstrap 5 虽移除了display: block，但不加min-width: 0仍无法真正收缩 - 别用
.col-*包裹搜索框——.navbar不是 grid 容器，这些类完全不生效
正确包裹结构：input-group + flex-grow-1 + min-width: 0
必须用 input-group 作为外层容器，它自带 d-flex 和合理 box-sizing，再配合三个关键样式才能触发弹性收缩：
- 外层
<div class="input-group"> 加 <code>flex-nowrap（防止按钮换行） - 内部
<input class="form-control flex-grow-1">——flex-grow-1让它吃掉剩余空间，但必须配合style="min-width: 0;" - 右侧按钮（如
<button class="btn"></button>）加flex-shrink-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 内部，或者用了 float: right / position: absolute，就会脱离响应式控制流。
- 必须把整个
input-group放进<div class="collapse navbar-collapse" id="navMenu"> 里面，和其他 <code>.nav-item平级 - 想靠右？用
ms-auto（BS5）或ml-auto（BS4），别用float-right——它在 flex 容器里无效 - 错误示例：
<nav class="navbar"><div class="navbar-brand">...</div> <input></nav>—— 这个input根本不受折叠逻辑控制
最易被忽略的是 min-width: 0：它不是可选项，而是 flex 容器中触发「内容可收缩」的开关。没有它，flex-grow-1 就只是个摆设，浏览器仍按文本宽度撑开 input。这个值必须内联写在 input 上，CSS 类无法可靠覆盖。
