我想在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/