bootstrap 5 已移除 inputgroupappend/prepend，改用 input-group 容器内直接嵌套 form-control、button 或 input-group-text 实现自动对齐；需注意结构规范、尺寸类应用及 form-select 兼容性问题。
Bootstrap 4/5 中 InputGroupAppend 已被移除
Bootstrap 5 完全废弃了 InputGroupAppend 和 InputGroupPrepend 这两个类名。如果你在升级项目时发现输入框右侧按钮消失、样式错乱，或者控制台报 class="input-group-append" 不生效，大概率是这个原因——它不是写错了，是根本不存在了。
Bootstrap 4.0–4.6 还支持这两个类，但 5.0+ 统一改用更语义化的 input-group-text + input-group-button（实际是 button 或 input 元素直接放在 input-group 内），靠 flex 布局自动对齐。
正确写法：用 input-group 包裹 + 直接放 button
不用额外类名，只要结构符合规范，Bootstrap 5 就能自动处理尺寸、边框、圆角和 hover/focus 状态。关键点在于：
-
input-group是最外层容器，必须有 -
form-control（或form-select）放中间 -
button、input type="button"或span.input-group-text可以放在左右任意位置，顺序即渲染顺序 - 按钮不需要加
btn类也能继承样式，但加了更可控（推荐加）
示例（右侧按钮）：
<div class="input-group"> <input type="text" class="form-control" placeholder="搜索..."><button class="btn btn-outline-secondary" type="button">搜索</button> </div>
input-group-text 和按钮混用要注意宽度与交互
如果右侧既要图标/文字提示（如 @），又要操作按钮（如“发送”），别把两个都塞进同一个 input-group-text —— 它只适合静态内容。正确做法是分开：
-
input-group-text放图标或单位（如%、kg） -
button单独作为可点击元素，保持btn类和交互状态 - 两者并列时，Bootstrap 会等宽分配剩余空间；若想按钮固定宽度，给它加
flex-shrink-0
错误写法（按钮失效、无 hover 效果）：
<div class="input-group"> <input class="form-control"><span class="input-group-text"><button class="btn">提交</button></span> </div>
正确写法：
<div class="input-group"> <input class="form-control" placeholder="邮箱"><span class="input-group-text">@</span> <button class="btn btn-primary flex-shrink-0">发送</button> </div>
自定义尺寸或主题时，input-group 的 class 必须同步更新
input-group 本身不响应 form-control-lg 这类尺寸类——它只作用于内部的 form-control。要整体变大，得给 input-group 加 input-group-lg（Bootstrap 5.2+）或手动加 size 相关类（旧版需额外 CSS）。
- Bootstrap 5.2+ 支持
input-group-sm/input-group-lg，且会联动内部元素 - 5.0–5.1 需分别加：
form-control-sm+btn-sm+input-group-text内部字体调小 - 主题色（如
btn-success）不影响input-group-text背景，默认是浅灰；如需统一，单独设background-color
容易忽略的是：当用 form-select 替换 form-control 时，input-group 仍有效，但下拉箭头位置可能偏移——这是浏览器原生控件限制，无法靠 Bootstrap 修复，只能换 form-control + JS 模拟下拉。
