升级Bootstrap 4至v4.0.0后input-group-addon类缺失，功能异常咨询

你好呀～你的操作本身不算错误，但其实Bootstrap 4从beta版本升级到正式版v4.0.0时，对输入组（Input Group）的结构做了官方调整，input-group-addon这个旧类确实被移除了，这才是代码失效的核心原因。

官方的变更说明 #

Bootstrap 4正式版把原来的input-group-addon拆分成了两个容器类和一个文本类：

• input-group-prepend：用于包裹需要放在输入框左侧的附加元素
• input-group-append：用于包裹需要放在输入框右侧的附加元素
• input-group-text：替代原来的input-group-addon，作为附加元素的样式类

示例对比 #

Beta版本的旧写法：

<div class="input-group">
  <span class="input-group-addon">￥</span>
  <input type="text" class="form-control" placeholder="金额">
  <span class="input-group-addon">.00</span>
</div>

正式版v4.0.0的新写法：

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">￥</span>
  </div>
  <input type="text" class="form-control" placeholder="金额">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

关于你自行添加类的操作 #

你手动在CSS中添加input-group-addon类能恢复功能，是因为补全了原来缺失的样式规则，但从长期维护的角度来看，更推荐你改用官方的新结构写法——这样后续Bootstrap版本更新时，不会因为旧类的兼容性问题再次出现故障。

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