Bootstrap 输入组前后缀不贴合边框，是因为漏了必需的 .input-group 容器；前后缀内按钮点击无效需覆盖 pointer-events: auto；v4 升 v5 后错位源于 display 从 table-cell 改为 flex。
input group 前后缀不贴合边框？检查是否漏了 .input-group 容器
bootstrap 的前后缀（如 @、$ 或按钮）必须严格包裹在 .input-group 元素内，否则样式完全失效——不是位置偏移，是根本没效果。常见错误是直接把 .input-group-text 加在 <input> 外面，但没套最外层容器。
-
.input-group是必需的父容器，不能省；.form-control和.input-group-text必须是它的直接子元素 - 如果用了
.input-group-prepend或.input-group-append（Bootstrap 4），注意它们在 v5 中已被废弃，统一用.input-group-text+ 顺序控制 - 自定义图标或按钮时，确保它们有
.input-group-text类，否则 padding 和 vertical-align 不对齐
<div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Username"> </div>
前后缀里放按钮点击无效？别忘了禁用 pointer-events
Bootstrap 默认给 .input-group-text 加了 pointer-events: none，这是为了不让前后缀遮挡输入框焦点——但如果你在里面放了按钮（比如搜索图标按钮），它就点不了。
- 需要交互的按钮，必须显式覆盖：加
class="input-group-text"的同时再加style="pointer-events: auto;" - 更稳妥的做法是不用
.input-group-text包按钮，改用.input-group-append（v4）或直接用.input-group+.btn并手动调 margin（v5 推荐） - 按钮尺寸要和
.form-control对齐，优先复用.btn-sm/.btn-lg，别靠 padding 硬调
<div class="input-group"> <input type="text" class="form-control"><button class="btn btn-outline-secondary" type="button">Go</button> </div>
v4 升 v5 后前后缀错位？重点看 .input-group-text 的 display 变化
Bootstrap 5 把 .input-group-text 的 display 从 table-cell 改成了 flex，导致老写法里用 width: 1% 或 white-space: nowrap 控制宽度的行为失效，尤其在 IE 或某些安卓 WebView 中表现异常。
- 不要给
.input-group-text设固定 width，它会自动收缩内容；需要等宽？统一用flex: 1配合min-width - 图标字体（如 Font Awesome）建议用
<i></i>标签 +.input-group-text，别用伪元素，否则 flex 布局下对不齐 - 如果前后缀文字过长导致换行，加
text-nowrap到.input-group-text内部元素上，不是加在外层
想让前后缀响应式隐藏？别用 visibility: hidden，用 .d-none 类组合
用 visibility: hidden 或 display: none 写内联样式会破坏 .input-group 的 flex 流式布局，导致输入框撑不满容器。Bootstrap 的响应式显示控制必须走它的工具类体系。
- 移动端隐藏前缀、桌面显示：给前缀加
class="input-group-text d-md-block d-none" - 注意
.d-none在所有断点都生效，必须配合d-{breakpoint}-*显式开启，比如d-sm-inline表示从 sm 起显示为 inline - 避免嵌套多个
.input-group实现“条件渲染”，这会让 DOM 结构混乱且影响可访问性
<button type="submit"></button> 而不是 <span></span>，否则键盘用户无法回车触发。样式可以一样，但标签和属性得对。
