bootstrap 5中.input-group圆角丢失主因是结构错误或css覆盖：1.手动添加border-radius；2.嵌套多余容器；3.尺寸类未同步；4.变量修改未重编译。需检查html结构合规性，优先用scss变量定制而非硬覆盖。
Bootstrap 5 中 .input-group 圆角丢失的常见原因
默认情况下，Bootstrap 5 的 .input-group 会自动处理左右圆角：最左元素（如 .input-group-text）右圆角清零，最右 input 左圆角清零，中间元素全无圆角——但前提是结构正确且未被覆盖。圆角消失通常不是 Bug，而是 CSS 层叠或结构破坏导致。
- 手动给
input或.input-group-text加了border-radius（直接覆盖了 Bootstrap 的重置逻辑） -
.input-group内部嵌套了额外容器（比如div包裹input），导致 Bootstrap 选择器无法精准命中子元素 - 使用了
.form-control-sm/.form-control-lg但没同步加到.input-group-text上，高度不一致触发了圆角禁用逻辑 - 自定义主题或 SCSS 里修改了
$input-border-radius但没重新编译input-group相关规则
检查并修复 .input-group 结构是否合规
Bootstrap 5 的圆角控制依赖于直接子元素顺序和 class。必须严格按文档结构写：
<div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control"> </div>
以下写法都会破坏圆角：
- 在
input外多套一层<div><input></div> - 把
.input-group-text放在input后面（顺序反了） - 同时用了
.input-group-prepend/.input-group-append（这是 Bootstrap 4 的旧类，5 中已废弃，会导致样式失效）
强制恢复圆角的最小侵入式 CSS
如果结构确认无误但圆角仍不出现，大概率是其他 CSS 覆盖了 border-radius。不要全局重写，只针对性修复：
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group .form-control:first-child {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.input-group .form-control:last-child {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
.input-group .input-group-text:first-child {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.input-group .input-group-text:last-child {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
注意：0.375rem 是 Bootstrap 5 默认的 $border-radius 值，若你改过该变量，需同步替换。
使用 SCSS 时如何安全定制圆角
如果你用的是源码编译（如通过 Sass），最稳妥的方式是在引入 Bootstrap 前覆盖变量：
$border-radius: 0.5rem; // 自定义统一圆角 $input-border-radius: $border-radius; $input-group-addon-border-radius: $border-radius;
然后正常 @import "bootstrap"。这样所有组件（包括 .input-group 内部逻辑）都会基于新值生成规则。硬写 CSS 覆盖容易漏掉 focus 状态、disabled 状态等边界情况。
圆角逻辑其实藏在 _input-group.scss 里，它靠兄弟选择器和伪类动态控制，一旦结构或变量偏离预期，就很容易“看起来没效果”。动手前先用浏览器开发者工具检查 computed border-radius 和实际生效的 rule 来源，比猜更快。
