调整Bootstrap“输入组”的各自宽度

Question

使用Bootstrap v3.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>

我得到的是以下内容：

但是，我不希望双方平等。 我希望第一个文本框比第二个文本框宽3倍，就像您在电话号码中所期望的那样。

使用CSS通过id设置样式，我可以减小任意一侧的宽度，但是最终看起来像这样：

#long-item{
    width:70%
}

#short-item{
    width:30%
}

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

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

Answer 1

进一步修改后，我确定以下代码将达到我的目的：

#short-item{
    width: 3em;
}

它不会在调整表单大小时保持该比率，但是会使较短的框保持我想要的大小。 较大的框根据其在col-md-3 div中的嵌套形式进行扩展和收缩。

编辑：但是，我也注意到此宽度不能应用于左侧文本输入。 我们再次得到了我在按百分比更改宽度时看到的怪异的短缺和差距。

我希望这可以帮助其他人。