Bootstrap中Input Group内Span不对齐问题及Bootstrap 4适配方案

当input-group-addon文本长度不一致时，输入框错位的核心原因是默认情况下input-group-addon宽度随内容自适应，导致每个输入组的前置元素尺寸不同。可以通过以下两种方式解决：

方法1：自定义固定宽度 #

给所有input-group-addon设置统一的固定/最小宽度，确保前置元素尺寸一致：

.input-group-addon {
    /* 按需调整宽度值 */
    min-width: 120px;
    /* 可选：文本左对齐更美观，默认是居中 */
    text-align: left;
    /* 可选：文本过长时显示省略号，避免换行撑宽 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

如果希望强制固定宽度（不随文本长度变化），把min-width换成width即可。

方法2：结合网格系统 #

利用Bootstrap 3的网格类，给input-group-addon分配固定列宽，实现响应式对齐：

<div class="input-group">
    <span class="input-group-addon col-xs-3">用户姓名</span>
    <input type="text" class="form-control">
</div>
<div class="input-group">
    <span class="input-group-addon col-xs-3">联系电话（较长标签）</span>
    <input type="text" class="form-control">
</div>

同时调整样式消除网格类与input-group-addon的padding冲突：

.input-group .input-group-addon[class*="col-"] {
    width: auto;
    padding-right: 15px;
}

Bootstrap 4废弃了input-group-addon，改用input-group-prepend+input-group-text的结构，且默认使用Flexbox布局，对齐实现更灵活：

方法1：固定宽度前置元素 #

通过Flex属性设置input-group-text的固定宽度：

.input-group-text {
    /* flex: 不放大、不缩小、基础宽度120px */
    flex: 0 0 120px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

对应HTML结构：

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">用户姓名</span>
    </div>
    <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">联系电话（较长标签）</span>
    </div>
    <input type="text" class="form-control">
</div>

方法2：结合Bootstrap 4网格系统 #

直接给input-group-text添加列类，实现响应式宽度分配：

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text col-3">用户姓名</span>
    </div>
    <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text col-3">联系电话（较长标签）</span>
    </div>
    <input type="text" class="form-control">
</div>

调整样式消除padding冲突：

.input-group-prepend .input-group-text.col-3 {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

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