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

Question

我想使用 bootstrap 网站上的 .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/