html - 调整Bootstrap "input-group"各自的宽度

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 中的嵌套随表单扩展和收缩。

编辑:但是，我还注意到此宽度不能应用于左侧文本输入。我们再次看到我在按百分比更改宽度时看到的那种奇怪的短小和间隙。

我希望这对其他人有帮助。