Bootstrap實現水平排列的表單

通過為表單添加.form-horizo​​ntal 類，並聯合使用Bootstrap 預置的柵格類，可以將label 標籤和控件組水平並排佈局。這樣做將改變.form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加.row 了。

水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需創建一個水平佈局的表單，請按下面的幾個步驟進行：

1、向父<form> 元素添加class .form-horizo​​ntal。

2、把標籤和控件放在一個帶有class .form-group 的<div> 中。

3、向標籤添加class .control-label。

實現代碼：

 <form role="form"> <div> <label for="inputEmail3">Email</label> <div> <input type="email" id="inputEmail3" placeholder="Email"> </div> </div> <div> <label for="inputPassword3">Password</label> <div> <input type="password" id="inputPassword3" placeholder="Password"> </div> </div> <div> <div> <div> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div> <div> <button type="submit">Sign in</button> </div> </div> </form>

如果大家還想深入學習，可以點擊這裡進行學習，再為大家附一個精彩的專題：Bootstrap學習教程

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。