bootstrap输入框前端的图标不能对齐的解决

按照版本3.3.1的样例代码（使用的3.3.6）输入框前端的icon和后面的框总是错位，后来在网上查了一下把加入icon的代码重新组织了才正常。

<form class="form-horizontal">
 <div class="form-group">
 <label for="yourName" class="col-sm-3 control-label">Name</label>
 <div class="col-sm-9">
 <div class="input-group">

之前有问题的代码<span class="input-group-addon glyphicon glyphicon-user"></span>
换成：<span class="input-group-addon "  ><span class="glyphicon glyphicon-user  "  ></span></span>
 <input type="text" class="form-control" id="yourName"
placeholder="Your name please"> </span>
 </div>
 </div>
 </div>