用bootstrap練習(xí)一個表單小項目的時候，發(fā)現(xiàn)設(shè)置了class="form-horizontal" 卻不能達(dá)到菜鳥教程水平表單的效果
菜鳥教程效果：
菜鳥教程.png
我的布局效果：
label-input無法同行.png
首先了解一下bootstrap三種布局表單的做法：
分為：垂直表單（默認(rèn)）等缀、內(nèi)聯(lián)表單祠锣、水平表單
①垂直表單
? 向父 <form> 元素添加 role="form"友绝。
? 把label標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中牍疏。這是獲取最佳間距所必需的。
? 向所有文本元素 <input>抓艳、<textarea> 苗踪、<select> 添 class ="form-control" 颠区。
②內(nèi)聯(lián)表單
和垂直表單的區(qū)別在于呈現(xiàn)橫向排列元素的效果
設(shè)置方式和垂直表單一樣，只是多了一個<form class="form-inline" role="form">
③水平表單
? 向父 <form> 元素添加 class .form-horizontal通铲。
? 把label標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中毕莱。這是獲取最佳間距所必需的。
? 向標(biāo)簽添加 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="請設(shè)置密碼">
</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>
