Bootstrap input-group-prepend组件：尺寸不匹配与圆角异常问题

问题描述 #

使用Bootstrap的input-group-prepend类时遇到两个异常：

• 前置的#图标容器高度异常
• 图标容器右侧仍保留圆角（输入框左侧已正常变为直角，符合预期）

截图：

代码示例 #

<div class="input-group">
  <label for="linkdev_id" class="sr-only">ID</label>
  <div class="input-group-prepend">
    <span class="input-group-text"><img src="./sym/hash.svg" width="20" height="20"></span>
  </div>
  <input type="text" minlength="6" maxlength="6" name="linkdev_id" id="linkdev_id" class="form-control" placeholder="ABCDEF" style="text-transform:uppercase;">
</div>

已尝试操作：移除标签、替换SVG，均无效果。

解决方法 #

1. 检查Bootstrap依赖与版本 #

确认已正确引入官方稳定版Bootstrap CSS，无重复引入或文件缺失情况。input-group-prepend的样式依赖严格的层级结构，依赖缺失会导致样式错乱。

2. 修复圆角异常 #

手动覆盖input-group-text的圆角样式（可能被自定义样式干扰）：

.input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

3. 修复高度异常 #

• 重置容器的高度相关样式，匹配Bootstrap默认表单控件的内边距与行高：

.input-group-prepend .input-group-text {
  height: auto;
  padding: .375rem .75rem;
  line-height: 1.5;
}

• 确保SVG图标无额外间距，添加display: block：

.input-group-text img {
  display: block;
  margin: 0;
}

4. 基础结构测试排查 #

先用最简结构验证是否正常，再逐步添加自定义内容：

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">#</span>
  </div>
  <input type="text" class="form-control" placeholder="ABCDEF">
</div>

如果基础结构正常，再依次加入SVG、文本转换等自定义内容，定位问题来源。

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