如何在Bootstrap 4表单中将验证码图片作为输入组附加项并消除边距边框？

Hey there! 我看你遇到了Bootstrap 4表单里验证码图片作为输入组项时的样式问题——多余边框和输入框高度不一致对吧？这其实是因为你用了Bootstrap 4已经弃用的input-group-addon类，这个旧类名会和Bootstrap 4的新输入组结构产生样式冲突。

来给你改一下代码，用Bootstrap 4官方推荐的结构来解决：

<fieldset class="form-group">
  Captcha
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text p-0 border-0">
        <img src="<?php LinkGen::getLink("captcha.php"); ?>" class="img-fluid" style="max-height: calc(1.5em + .75rem + 2px);" />
      </span>
    </div>
    <input type="text" class="form-control" id="AntiSpamImage" name="AntiSpamImage" autocomplete="off" required />
  </div>
</fieldset>

下面是关键的修改说明：

• 用input-group-prepend来包裹验证码图片，这是Bootstrap 4中实现输入组前置元素的标准结构
• 把图片放在input-group-text容器里，同时给这个容器加上p-0（清除默认内边距）和border-0（移除默认边框），这样就不会出现多余的边框了
• 给图片设置max-height: calc(1.5em + .75rem + 2px)，这个值是Bootstrap 4默认form-control的高度，能确保验证码图片和输入框的高度完全对齐
• 去掉了原来的margin:0，因为新的结构已经能很好地控制元素间距，不需要额外设置

如果之后需要调整验证码图片的宽度，直接给图片添加max-width样式或者微调img-fluid的属性就可以啦。

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