小屏下搜索框被截断或撑出滚动条的根本原因是.form-control的width:100%与无约束父容器及盒模型叠加导致溢出；应使用input-group包裹，配合flex-shrink-0、flex-grow-1和min-width:0实现弹性收缩。
搜索框在小屏下被截断或撑出横向滚动条
这是最常见的表现：手机上打开页面，input 超出导航栏边界，或者右侧按钮错位、文字换行。根本原因是 Bootstrap 默认把 .form-control 设为 width: 100%，但父容器（比如 .navbar-nav 或自定义 div）没做宽度约束，加上 padding 和 border 的盒模型叠加，小屏下极易溢出。
解决思路不是强行设 max-width，而是让搜索框「弹性收缩」而非「强制占满」：
- 给搜索框外层包一个
<div class="input-group">，并添加 <code>flex-shrink-0（Bootstrap 5）或flex-shrink: 0（手动加）防止被压缩变形 - 搜索框本身用
flex-grow-1+min-width: 0（关键！触发 flex 容器的最小宽度重置） - 避免直接在
input上写width: 100%—— 它会和 flex 布局冲突
<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">?</button> </div>
Bootstrap 4 和 5 的 form-control 行为差异
Bootstrap 4 的 .form-control 默认带 display: block 和 width: 100%，放进 .navbar-nav > li 里几乎必出问题；Bootstrap 5 改为 width: 100% 但移除了 display: block，更适配 flex 布局，但依然要配合 min-width: 0 才能真正响应收缩。
如果你还在用 Bootstrap 4：
- 必须手动加
style="width: auto; max-width: 200px;"这类兜底（不推荐） - 或升级到
input-group+d-flex+w-100组合，并确保父元素是flex容器 - 别依赖
.col-*类——导航栏里它们不生效，因为 navbar 不是 grid 容器
搜索框和右侧按钮在折叠菜单中消失
很多人把搜索框放在 .navbar-collapse 外面，以为“它不属于菜单项”，结果折叠后它就悬在页面顶部不动了；或者放里面但用了 float: right，导致在折叠状态下完全不可见。
正确做法只有一条：搜索框必须作为 <li class="nav-item"> 的子元素，和其他导航项平级：
- 不要用
position: absolute或float强行定位 - 如果想靠右，用
ms-auto（BS5）或ml-auto（BS4）代替float-right - 折叠后默认隐藏？那就加
navbar-nav类到它的父ul，并确保它在.navbar-collapse内部
错误示例：<div class="navbar-brand">...</div>
<input> —— 这个 input 不属于任何响应式控制范围。
输入框获得焦点时右侧按钮被遮挡
移动端 Safari 和部分安卓浏览器在 input 获焦时会放大视口，同时触发软键盘弹出，若右侧按钮是 position: absolute 或紧贴 input 右侧，常被键盘顶开或遮住。
稳妥方案是放弃绝对定位，改用 input-group 原生结构：
-
input-group-text或btn放在input-group内部，天然共享高度与对齐 - 避免给按钮设固定
width，用px-3/py-2控制内边距 - 如果必须图标按钮，用
<i class="bi bi-search"></i>而非背景图 —— 后者在缩放时易模糊或错位
真遇到聚焦跳动，大概率是 input 的 height 和按钮 line-height 不一致，统一用 form-control 类即可对齐。
响应式宽度的复杂点不在 CSS 写多少，而在「谁该伸缩、谁该锁定、谁该随内容自适应」这三者的边界是否清晰。漏掉 min-width: 0 或误用 float 是最常被忽略的两个地方。
