我想使用 .col-lg-* 类来控制输入元素的大小概述here在 Bootstrap 网站上。但是，将 <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/

最佳答案

根据我上面的评论，尝试将标签和 .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/

关于html - Bootstrap 3 : Set custom width with input-group/input-group-addon and horizontal labels，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20277449/