input-group 必须用 div 包裹，内部按前缀→input→后缀顺序排列；input-group-text 仅用于纯文本前后缀，按钮需用 btn 类；验证状态需将 invalid-feedback 置于 input-group 外部，响应式下优先用 col 或 w-100 控制宽度。
input-group 基础结构必须用 div 包裹，不能直接套在 input 上
很多人直接给 input 加 class="input-group"，结果样式完全不生效——Bootstrap 的 input-group 是一个**容器级组件**，必须用 div 作为外层包裹，内部再放 input 和前后缀元素。
正确写法：
<div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Username"> </div>
-
input-group-text用于纯文本前缀/后缀（如 @、$、.com） - 如果要用按钮或下拉菜单，得换用
input-group-btn或dropdown-toggle等配套类（Bootstrap 5+ 已改用btn+input-group-text组合） - Bootstrap 5 移除了
input-group-addon，别再照着老教程写
前后缀同时存在时，input 必须在中间，顺序不能错
Bootstrap 依赖 CSS 的相邻兄弟选择器（.input-group-text + .form-control 和 .form-control + .input-group-text）来控制边框和圆角。一旦顺序乱了，比如把 input 放最前或最后，就会出现双左/右圆角、边框重叠或断裂。
- 合法顺序只有三种：
前缀 → input → 后缀、前缀 → input、input → 后缀 - 错误示例：
<input><span class="input-group-text">kg</span>—— 后缀不会贴右，且左圆角丢失 - 若需动态切换前后缀，建议用 JS 控制整个
div.input-group的 innerHTML，而不是只增删某个子节点
在表单验证状态（如 is-invalid）下，input-group 需额外处理反馈图标位置
原生 Bootstrap 不会自动把 :invalid 状态的红色边框“撑满”整个 input-group 容器；更麻烦的是，invalid-feedback 默认定位在 input 下方，但被 input-group 的相对定位干扰后，可能错位或被遮挡。
- 给
input加is-invalid即可触发边框变红，但需确保父级div.input-group没有设置overflow: hidden（否则图标截断） -
invalid-feedback要放在div.input-group外部紧邻位置，不能塞进里面 - 如果用了自定义图标（如 Font Awesome），建议用绝对定位 +
transform: translateY()微调，避免依赖input-group内部的 flex 排列逻辑
响应式断点下，input-group 宽度行为容易失控
默认情况下，input-group 里的 input 是 flex: 1，但当父容器宽度收缩（比如小屏）、或遇到 col-* 栅格嵌套时，它可能突然缩成窄条，甚至内容溢出。
- 避免在
input-group外层直接套col-sm-6这类固定宽度类，优先用col（自动伸缩）或w-100 - 若需固定最小宽度，给
input加min-width: 0（防止 flex 布局下文本撑宽） - 在
form-floating与input-group混用时，浮动标签会覆盖前缀/后缀，这种组合官方不支持，得手动加z-index或放弃浮动效果
真正难的不是写对结构，而是当它嵌在 modal、tab-pane 或第三方组件里时，CSS 层叠和 flex 容器嵌套会让前缀/后缀突然“消失”或错位——这时候得打开开发者工具，一层层看 display 和 flex-direction 是否被意外覆盖。
