调整Bootstrap＆＃34;输入组＆＃34;各自的宽度

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中的嵌入而扩展和收缩。

编辑：但是，我也注意到这个宽度不能应用于左侧文本输入。我们再次得到了在宽度百分比变化中看到的那种奇怪的短缺和差距。

我希望这有助于其他人。