Html “调整自举”；“输入组”；各自的宽度

使用BootstrapV3.3.4，我试图创建一个输入组来表示电话号码之类的内容

<div class="form-horizontal">
    <div class="form-group">
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" id="long-item" class="form-control" />
                <div class="input-group-addon">Ext</div>
                <input type="text" id="short-item" class="form-control" />
            </div>
    </div>
</div>

这是行不通的，因为它弄乱了输入组的整体“明显”宽度，留下了巨大的差距。显然，宽度在这里不适合使用

---

我需要做些什么来调整它们的宽度，使一个文本输入比另一个文本输入大，但它们都填满了分配的列空间？

经过进一步的修补，我确定以下代码可以满足我的目的：

#short-item{
    width: 3em;
}

它不会在窗体调整大小时保持比率，但会使较短的框保持我想要的大小。根据col-md-3分区中的嵌套情况，较大的盒子与表单一起展开和收缩

编辑：但是，我也注意到这个宽度不能应用于左文本输入。我们再一次得到了我在改变宽度的百分比时看到的奇怪的短距离和间隙

我希望这对其他人有帮助

#short-item{
    width: 3em;
}