為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）。


需要手動(dòng)設(shè)置寬度

在 Bootstrap 中，輸入框和單選/多選框控件默認(rèn)被設(shè)置為 width: 100%; 寬度。在內(nèi)聯(lián)表單，我們將這些元素的寬度設(shè)置為 width: auto;，因此，多個(gè)控件可以排列在同一行。根據(jù)你的布局需求，可能需要一些額外的定制化組件。

一定要添加 label 標(biāo)簽
如果你沒(méi)有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽，屏幕閱讀器將無(wú)法正確識(shí)別。對(duì)于這些內(nèi)聯(lián)表單，你可以通過(guò)為 label 設(shè)置 .sr-only 類將其隱藏。

如果需要?jiǎng)?chuàng)建一個(gè)表單，它的所有元素是內(nèi)聯(lián)的，向左對(duì)齊的，標(biāo)簽是并排的，請(qǐng)向 <form> 標(biāo)簽添加 class .form-inline。

<form class="form-inline" role="form"> 
  <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail2">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> 
  </div> 
  <div class="form-group"> 
    <div class="input-group"> 
      <div class="input-group-addon">@</div> 
      <input class="form-control" type="email" placeholder="Enter email"> 
    </div> 
  </div> 
  <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword2">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
  </div> 
  <div class="checkbox"> 
    <label> 
      <input type="checkbox"> Remember me 
    </label> 
  </div> 
  <button type="submit" class="btn btn-default">Sign in</button> 
</form>