Html 引导3：使用输入组/输入组插件和水平标签设置自定义宽度

我想使用bootstrap网站上概述的类

.col lg-*

来控制输入元素的大小。但是，将

元素放在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>

收入
薪水
$ 
投资
$
其他
$ 
更新

---

示例：根据我上面的评论，尝试将标签和

.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>

薪水
$ 

---

此处演示-

仅

。表单控件

和

。输入组插件

元素应放入

。输入组

容器中。使用

.form group

对标签和

进行分组。input group

元素显示此-？谢谢Phil。您所做的看起来不错，但我真的希望标签显示在输入元素旁边。这可能吗？@Keven为此，你应该使用。您需要将

col-

类添加到标签和

.input group

元素中进行大小调整我已经在我的表单元素中使用了

.form horizontal

。所以如果我把

.input组

类放在标签上，它应该会工作吗？你能做一把小提琴来告诉我你的意思吗？@Keven啊，你的小提琴没有水平形状。下面是一个横向示例-。注意标签和输入组上的

col-

类。我使用了

xs

列，因此它可以在JSFIDLE的小窗口中工作。谢谢！！你真棒。成功了。我确实注意到了

xs

。我会根据我的需要改变它。祝你过得愉快！