Bootstrap實現(xiàn)水平排列的表單

字號:


    通過為表單添加 .form-horizontal 類,并聯(lián)合使用 Bootstrap 預置的柵格類,可以將 label 標簽和控件組水平并排布局。這樣做將改變 .form-group 的行為,使其表現(xiàn)為柵格系統(tǒng)中的行(row),因此就無需再額外添加 .row 了。
    水平表單與其他表單不僅標記的數(shù)量上不同,而且表單的呈現(xiàn)形式也不同。如需創(chuàng)建一個水平布局的表單,請按下面的幾個步驟進行:
    1、向父 <form> 元素添加 class .form-horizontal。
    2、把標簽和控件放在一個帶有 class .form-group 的 <div> 中。
    3、向標簽添加 class .control-label。
    名單
    實現(xiàn)代碼:
    <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>
    以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助