根本原因是未用 input-group 容器包裹，Bootstrap 5 依赖其 flex 布局实现自动对齐，必须将 form-control 与 btn 共同嵌套于 div.input-group 内，且按钮须带 btn 类，尺寸、父容器样式等不匹配也会导致视觉断裂。
搜索框和按钮不连在一起，根本原因是没用 input-group 容器包裹，或者结构不符合 Bootstrap 5 的语义要求——它不是靠 margin 或 float 拼出来的，而是靠 flex 布局自动对齐的。
必须用 input-group 包裹，不能只加类名或并列写元素
Bootstrap 5 不再识别 input-group-append 这类旧类名，也不接受两个独立的 form-control 和 btn 并排写在 HTML 里。只有把它们放进同一个 div class="input-group"，内部元素才会被统一设置高度、边框、圆角和基线对齐。
- 错误写法：
<input class="form-control"><button class="btn">Go</button>→ 两者各自渲染，垂直错位、边框双线、圆角全保留 - 正确结构：
<div class="input-group"><input class="form-control"><button class="btn">Go</button></div> - 如果用了
form-select或form-check，同样要塞进input-group，否则对齐失效
input-group 内部按钮必须带 btn 类
Bootstrap 5 的 input-group 样式逻辑依赖子元素是否具有 btn 类来判断“这是可交互控件”，否则会当成普通 inline 元素处理，导致高度塌陷、边框丢失、hover 状态不生效。
- 即使你用
<input type="button">或<a href="#">，也得手动加class="btn" - 不推荐用
<span class="input-group-text">替代按钮——它只是静态容器，没有点击反馈、禁用状态或 focus outline - 图标按钮（如搜索图标）若需交互，必须是
button或带btn类的元素，不能只放 SVG
常见布局断裂点：尺寸类不匹配、外层干扰样式
即使结构正确，input-group 也可能看起来“断开”——多半是尺寸或父容器样式冲突造成的视觉错觉。
- 输入框和按钮尺寸不一致？统一加
input-group-sm或input-group-lg，别单独给form-control-sm却漏掉btn-sm - 按钮被挤到下一行？检查父容器是否用了
flex-wrap: wrap或设置了过窄的max-width；input-group默认是flex-nowrap，但外层一加col或d-flex就可能触发换行 - 右侧按钮宽度异常？加
flex-shrink-0防止被压缩，尤其在响应式栅格中 - 用了
navbar或offcanvas？确保input-group是直接子元素，不要嵌套在额外的div里，否则justify-content失效
移动端键盘弹出后按钮“消失”或错位
这不是样式问题，是 Safari/Chrome Android 在软键盘唤起时重排布局导致的 viewport 缩放抖动。单纯调 margin 或 position 无法根治。
- 给
input-group外层加position: relative，按钮用position: absolute右对齐（慎用，破坏语义） - 更稳妥的做法：加
me-2提供右间距缓冲，避免键盘顶起时按钮被裁切 - 若在
navbar-collapse里，确保整个input-group是collapse的直接子元素，否则小屏展开时 DOM 位置错乱
