Bootstrap 3：使用input-group / input-group-addon和horizo​​ntal标签设置自定义宽度

Question

我想使用引导程序网站上的.col-lg-*类here来控制输入元素的大小。但是，将<span>元素放在div中会使其完全混乱：

带div的HTML：

<div class="input-group input-group-lg">
  <label for="" class="control-label">Paycheck</label>
  <div class="col-lg-10">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control" id="">
  </div>
</div>

如何设置输入元素的宽度以使它们完全相同？

我希望每个输入元素的左边距都是齐平的：

这就是现在的样子：

这是我目前的HTML：

    <div class="col-md-6">
        <div class="content">
            <h2>Income</h2>
        <form class="form-income form-horizontal" role="form">

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Paycheck</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Investments</label>
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" id=""> 
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Other</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
        </form>

        </div>

现场示例：http://jsfiddle.net/jfXUr/

Answer 1

根据我上面的评论，尝试将标签和.input-group与.form-group容器分组。

<div class="form-group">
    <label for="" class="control-label">Paycheck</label>
    <div class="input-group input-group-lg">
        <span class="input-group-addon">$</span> 
        <input type="text" class="form-control" id="">
    </div>
</div>

在这里演示 - http://jsfiddle.net/jfXUr/1/