搜索框点击后不展开因初始 width:0 或 display:none 阻断 transition，应设 width:40px、opacity:0、visibility:hidden，并用 flex-grow-1+min-width:0 实现弹性收缩与平滑动画。
搜索框点击后宽度不展开？检查初始 width 和 transition 组合
直接写 width: 0 或 display: none 的搜索框，点击后无法平滑展开——浏览器对不可见或无明确尺寸的元素不触发 transition。必须给它一个可动画的起点。
- 设初始
width: 40px（刚好容纳放大镜图标），同时加padding-left: 28px避免文字被遮挡 - 禁用
display: none切换，改用opacity: 0; visibility: hidden;+width控制显隐 -
transition只写width 0.3s ease, padding 0.3s ease，别用all，否则边框、颜色变化会引发重绘抖动 - 确保父容器有
position: relative，方便图标绝对定位
小屏下搜索框撑出滚动条？flex 收缩逻辑没配全
不是 width: 100% 写少了，而是 .form-control 在 flex 容器里缺关键收缩约束，导致盒模型溢出。Bootstrap 默认的 width: 100% 在 .navbar 这种 flex 容器中会被内容（文字+padding+border）撑开，尤其在小屏下。
- 必须用
<div class="input-group flex-nowrap"> 包裹，它自带 <code>d-flex和合理box-sizing -
<input class="form-control flex-grow-1">必须加style="min-width: 0;"——这是触发弹性收缩的关键，否则 flex 不会压缩 - 右侧按钮（如
<button class="btn"></button>）加flex-shrink-0，防止被压扁变形 - 别用
.col-*类——.navbar不是 grid 容器，这些类完全不生效 - 把整个
input-group当作一个 flex 子项，加ms-auto（BS5）或ml-auto（BS4）让它自动靠右 - 内部
<input>用flex-grow-1+style="min-width: 0; max-width: 50%;"，而非固定width - 如果需要更精确控制，配合媒体查询：比如小屏下改
max-width: 100%，避免超出视口 - 确认它在
<div class="collapse navbar-collapse"> 内部，和其他 <code>.nav-item平级；放外面就脱离响应式控制流折叠菜单里搜索框消失？结构位置错了
搜索框不在
.navbar-collapse内部，或者用了float: right/position: absolute，就会脱离响应式控制流，折叠后悬在页面顶部不动，或完全不可见。- 整个
input-group必须放进<div class="collapse navbar-collapse" id="navMenu"> 里面，和 <code><ul class="navbar-nav"></ul>同级 - 想靠右？用
ms-auto，别用float-right——它在 flex 容器里无效 - 别把搜索框塞进
<li class="nav-item">里再套<input>，这种嵌套会让li默认flex-shrink: 0，反而撑宽整行 - 如果用了自定义 JS 控制展开，检查是否误删了
data-bs-toggle="collapse"或data-bs-target属性
最易被忽略的是：
min-width: 0这个内联样式——它不是可选修饰，而是 flex 收缩的触发开关；没它，flex-grow-1就是摆设。 - 整个
想让搜索框占 50% 宽度且靠右？别硬写 width，用 ms-auto + flex 分配
直接给 <input> 设 width: 50% 会破坏 .navbar-collapse 的 flex 流式布局，剩余空间未分配，按钮容易悬空或换行。
