在文本输入框的前面，后面或是两边加上文字或按钮

通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。

跨浏览器兼容性

这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全支持它的样式。

不要和.form-group混用

不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件。

效果:

 

 

源码:

<div class="input-group">

<span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"></div><div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span></div><div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span></div>