Bootstrap 4.1输入组最后子元素遇验证丢失圆角问题求助

这个问题我之前在项目里也碰到过，确实是Bootstrap 4.1版本中表单验证与输入组结合时的一个小bug，分享几个优雅的解决方案：

1. 自定义CSS修复（最推荐） #

核心思路是把验证状态类（is-valid/is-invalid）加到整个input-group容器上，然后通过CSS精准恢复附加元素的圆角，不用修改太多HTML结构，就能统一控制验证状态：

/* 修复输入组验证状态下的圆角问题 */
/* 处理右侧附加元素 */
.input-group.is-valid > .input-group-append:last-child .btn,
.input-group.is-valid > .input-group-append:last-child .input-group-text,
.input-group.is-invalid > .input-group-append:last-child .btn,
.input-group.is-invalid > .input-group-append:last-child .input-group-text {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* 处理左侧附加元素 */
.input-group.is-valid > .input-group-prepend:first-child .btn,
.input-group.is-valid > .input-group-prepend:first-child .input-group-text,
.input-group.is-invalid > .input-group-prepend:first-child .btn,
.input-group.is-invalid > .input-group-prepend:first-child .input-group-text {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

对应的HTML结构示例：

<div class="input-group is-valid">
  <input type="text" class="form-control" id="validInput" placeholder="输入内容">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">确认</button>
  </div>
</div>

这种方法的好处是只需要给容器加验证类，所有子元素的状态都会被正确处理，维护成本很低。

2. 手动给附加元素添加验证类（适合简单场景） #

如果不想额外写CSS，可以尝试把is-valid/is-invalid类同时加到输入框和输入组的附加元素上，强制恢复圆角：

<div class="input-group">
  <input type="text" class="form-control is-valid" id="simpleInput" placeholder="输入内容">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary is-valid" type="button">确认</button>
  </div>
</div>

不过这种方法需要手动给每个附加元素同步验证状态，当页面上输入组较多时，维护起来会比较繁琐，只推荐用于简单场景。

3. 升级到Bootstrap 4.2+（根治方案） #

Bootstrap团队在4.2版本中已经修复了这个输入组验证时的圆角问题，如果你项目的依赖允许升级，直接升级到4.2或更高版本是最省心的选择——不需要写任何额外代码，框架本身就会正确处理输入组各元素的圆角样式。

内容的提问来源于stack exchange，提问作者Yevgeniy Afanasyev