Bootstrap input label不同行

用bootstrap练习一个表单小项目的时候，发现设置了class="form-horizontal" 却不能达到菜鸟教程水平表单的效果
菜鸟教程效果：

菜鸟教程.png
我的布局效果：
label-input无法同行.png
首先了解一下bootstrap三种布局表单的做法：
分为：垂直表单（默认）、内联表单、水平表单
①垂直表单
• 向父 <form> 元素添加 role="form"。
• 把label标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向所有文本元素 <input>、<textarea> 、<select> 添 class ="form-control" 。
②内联表单
和垂直表单的区别在于呈现横向排列元素的效果
设置方式和垂直表单一样，只是多了一个<form class="form-inline" role="form">
③水平表单
• 向父 <form> 元素添加 class .form-horizontal。
• 把label标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向标签添加 class .control-label。
我修改后的效果图：
label-input同行.png
代码如下：
<form action="http://localhost:0509/aaa" method="GET" role="form" class="form-horizontal" style="width:60%;margin-left:20%;">
<div class="form-group">
<label class="control-label col-sm-2">用户：</label>
<img class="img-circle" style="width: 20px;margin-top:7px;" src="。。。">
<div class="col-sm-9 pull-right" style="width:80%;">
<input type="text" class="form-control" name='usr' placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">密码：</label>
<img class="img-circle" style="width:20px;margin-top:7px;" src="。。。">
<div class="col-sm-9 pull-right" style="width:80%;">
<input type="password" class="form-control" name="ps" placeholder="请设置密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<button type="submit" class="btn btn-default" style="color:white;background:rgb(231, 145, 160);">提交</button>
</div>
</div>
</form>