通過為表單添加.form-horizontal 類,並聯合使用Bootstrap 預置的柵格類,可以將label 標籤和控件組水平並排佈局。這樣做將改變.form-group 的行為,使其表現為柵格系統中的行(row),因此就無需再額外添加.row 了。
水平表單與其他表單不僅標記的數量上不同,而且表單的呈現形式也不同。如需創建一個水平佈局的表單,請按下面的幾個步驟進行:
1、向父<form> 元素添加class .form-horizontal。
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學習教程
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。