html – Bootstrap 3:使用input-group / input-group-addon和horizo​​ntal标签设置自定义宽度

前端之家收集整理的这篇文章主要介绍了html – Bootstrap 3:使用input-group / input-group-addon和horizo​​ntal标签设置自定义宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在bootstrap网站上使用类.col-lg- *概述 here来控制输入元素的大小.但是,将< span>放入div里面的元素完全搞砸了:

带div的HTML:

  1. <div class="input-group input-group-lg">
  2. <label for="" class="control-label">Paycheck</label>
  3. <div class="col-lg-10">
  4. <span class="input-group-addon">$</span>
  5. <input type="text" class="form-control" id="">
  6. </div>
  7. </div>

如何设置输入元素的宽度以使它们完全相同?

我希望每个输入元素的左边距是这样的:

这就是现在的样子:

这是我目前的HTML:

  1. <div class="col-md-6">
  2. <div class="content">
  3. <h2>Income</h2>
  4. <form class="form-income form-horizontal" role="form">
  5.  
  6. <div class="input-group input-group-lg">
  7. <label for="" class="control-label">Paycheck</label>
  8. <span class="input-group-addon">$</span>
  9. <input type="text" class="form-control" id="">
  10. </div>
  11.  
  12. <div class="input-group input-group-lg">
  13. <label for="" class="control-label">Investments</label>
  14. <span class="input-group-addon">$</span>
  15. <input type="text" class="form-control" id="">
  16. </div>
  17.  
  18. <div class="input-group input-group-lg">
  19. <label for="" class="control-label">Other</label>
  20. <span class="input-group-addon">$</span>
  21. <input type="text" class="form-control" id="">
  22. </div>
  23.  
  24. <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
  25. </form>
  26.  
  27. </div>

现场例子:http://jsfiddle.net/jfXUr/

解决方法

根据我上面的评论,尝试将标签和.input-group与.form-group容器一起分组.
  1. <div class="form-group">
  2. <label for="" class="control-label">Paycheck</label>
  3. <div class="input-group input-group-lg">
  4. <span class="input-group-addon">$</span>
  5. <input type="text" class="form-control" id="">
  6. </div>
  7. </div>

在这里演示 – http://jsfiddle.net/jfXUr/1/

猜你在找的HTML相关文章