BootStrap输入框组

  input-group(输入框组)，输入框必须由input-group包裹，如果想做个图标加输入框的效果，根据顺序排版，图标所在span标签赋予input-group-addon样式，输入框input赋予form-control样式，让他填充整行+换行。

代码：

<style>

div{
  margin:5px;
}
</style>
<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
  <span class="input-group-addon" >@12306.com</span>
  <input type="text" class="form-control" placeholder="邮箱" aria-describedby="basic-addon2">
  <span class="input-group-addon" >@12306.com</span>
</div>
 
<div class="input-group">
  <input type="text" class="form-control" placeholder="邮箱" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@12306.com</span>
</div>
 
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control"  placeholder="金额" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>

</div>

form-inline属性使带有form-control和form-group的元素表现出行内的效果，form-inline一定要保证在一定的行宽下，否则会看不到内联效果