有時(shí)候我們需要將表單的控件都在一行內(nèi)顯示，類似這樣的：

在Bootstrap框架中實(shí)現(xiàn)這樣的表單效果是輕而易舉的，你只需要在<form>元素中添加類名“form-inline”即可。
內(nèi)聯(lián)表單實(shí)現(xiàn)原理非常簡(jiǎn)單，欲將表單控件在一行顯示，就需要將表單控件設(shè)置成內(nèi)聯(lián)塊元素（display:inline-block）。
/*源碼請(qǐng)查閱bootstrap.css文件第1928行~第1962行*/

如果你要在input前面添加一個(gè)label標(biāo)簽時(shí)，會(huì)導(dǎo)致input換行顯示。如果你必須添加這樣的一個(gè)label標(biāo)簽，并且不想讓input換行，你需要將label標(biāo)簽也放在容器“form-group”中，如：

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
</div>
<div class="form-group">
    <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>

接下來(lái)，我們還是以實(shí)例說(shuō)話：

<form class="form-inline" role="form">
<div class="form-group">
  <label class="sr-only" for="exampleInputEmail2">郵箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="請(qǐng)輸入你的郵箱地址">
</div>
<div class="form-group">
  <label class="sr-only" for="exampleInputPassword2">密碼</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請(qǐng)輸入你的郵箱密碼">
</div>
<div class="checkbox">
<label>
   <input type="checkbox">記住密碼
</label>
</div>
<button type="submit" class="btnbtn-default">進(jìn)入郵箱</button>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：(查看效果需要把結(jié)果窗口設(shè)置為全屏)

回過(guò)頭來(lái)看示例，你或許會(huì)問(wèn)，為什么添加了label標(biāo)簽，而且沒有放置在”form-group”這樣的容器中，input也不會(huì)換行；還有l(wèi)abel標(biāo)簽怎么沒顯示出來(lái)。如果你仔細(xì)看，在label標(biāo)簽運(yùn)用了一個(gè)類名“sr-only”，標(biāo)簽沒顯示就是這個(gè)樣式將標(biāo)簽隱藏了。
/*源碼請(qǐng)查閱bootstrap.css文件第342行~第350行*/

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

注意：那么Bootstrap為什么要這么做呢？這樣不是多此一舉嗎？其實(shí)不是的，如果沒有為輸入控件設(shè)置label標(biāo)簽，屏幕閱讀器將無(wú)法正確識(shí)別。這也是Bootstrap框架另一個(gè)優(yōu)點(diǎn)之處，為殘障人員進(jìn)行了一定的考慮。