Bootstrap3 表單-輸出內聯表單

爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。

須要手動設置寬度

在 Bootstrap 中，輸入框和單選/多選框控件默認被設置爲 width: 100%; 寬度。在內聯表單，咱們將這些元素的寬度設置爲 width: auto;，所以，多個控件能夠排列在同一行。根據你的佈局需求，可能須要一些額外的定製化組件。

必定要添加 label 標籤

若是你沒有爲每一個輸入控件設置 label 標籤，屏幕閱讀器將沒法正確識別。對於這些內聯表單，你能夠經過爲 label 設置 .sr-only 類將其隱藏。

<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>

---

—–下面有個「頂」字，你懂得O(∩_∩)O哈哈~
—–樂於分享，共同進步！
—–更多文章請看：http://blog.csdn.net/duruiqi_fx