Html Bootstrap 3：使用 input-group/input-group-addon 和水平标签设置自定义宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20277449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Set custom width with input-group/input-group-addon and horizontal labels
提问by Keven
I would like to control the size of my input elements using the class .col-lg-*outlined hereon the bootstrap website. However, putting the <span>element inside of a div completely messes it up:
我想控制使用类我的输入元素的大小.col-lg-*概述这里引导网站上。但是，将<span>元素放在 div 中完全搞砸了：
HTML with 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>
How can I set the width of the input elements so that they are all the same?
如何设置输入元素的宽度，使它们都相同？
I want the left margin of each input element to be flush like so:
我希望每个输入元素的左边距像这样齐平：
This is what it looks like now:
这是现在的样子：
This is my current HTML:
这是我当前的 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>
LIVE EXAMPLE: http://jsfiddle.net/jfXUr/
现场示例：http: //jsfiddle.net/jfXUr/
回答by Phil
As per my comment above, try grouping the label and .input-grouptogether with a .form-groupcontainer.
根据我上面的评论，尝试将标签与容器组合.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>
Demo here - http://jsfiddle.net/jfXUr/1/
演示在这里 - http://jsfiddle.net/jfXUr/1/
