Bootstrap 內(nèi)聯(lián)表單

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


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

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

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

如果需要創(chuàng)建一個表單，它的所有元素是內(nèi)聯(lián)的，向左對齊的，標簽是并排的，請向 <form> 標簽添加 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>