我想在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>
解决方法
根据我上面的评论,尝试将标签和.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/
