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

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

如果你要在input前面添加一個label標簽時，會導致input換行顯示。如果你必須添加這樣的一個label標簽，并且不想讓input換行，你需要將label標簽也放在容器“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>

接下來，我們還是以實例說話：

<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="請輸入你的郵箱地址">
</div>
<div class="form-group">
  <label class="sr-only" for="exampleInputPassword2">密碼</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請輸入你的郵箱密碼">
</div>
<div class="checkbox">
<label>
   <input type="checkbox">記住密碼
</label>
</div>
<button type="submit" class="btnbtn-default">進入郵箱</button>
</form>

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

回過頭來看示例，你或許會問，為什么添加了label標簽，而且沒有放置在”form-group”這樣的容器中，input也不會換行；還有l(wèi)abel標簽怎么沒顯示出來。如果你仔細看，在label標簽運用了一個類名“sr-only”，標簽沒顯示就是這個樣式將標簽隱藏了。
/*源碼請查閱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è)置label標簽，屏幕閱讀器將無法正確識別。這也是Bootstrap框架另一個優(yōu)點之處，為殘障人員進行了一定的考慮。