使用引導對齊表單中的字段

我使用bootstrap來設計網頁。我有兩個主要問題。首先，無法真正弄清楚如何對齊form中的字段。其次，調整form tag中的字段（寬度高度等）。我是否必須爲每個領域使用css？我試圖做到這一點，但然後對齊得到了混亂。這是我的代碼。使用引導對齊表單中的字段

  <div class="container"> 

     <form class="form-inline"> 

      <div class="form-group"> 
       <label class="form-control">In Out Specifier</label> 
       <select class="form-control" id="processInOutSpecifier" name="inOutSpecifier" > 
        <option></option> 
       </select> 
      </div> 

      <div class="form-group"> 
       <label class="form-control" id="callDateLabel">Call Date</label> 
       <select class="form-control" id="callDate" name="callDate" > 
        <option></option> 
       </select> 
      </div> 
      <div class="form-group"> 
       <label class="form-control" id="processCallDateFormatLabel" >Call Date Format</label> 
       <select class="form-control" id="callDate" name="callDateForamt"> 
        <option>yyyy-MM-dd</option> 
        <option> yyyy/MM/dd</option> 
        <option> MM-dd-yyyy</option> 
        <option> MM/dd/yyyy</option> 
        <option> dd-MM-yyyy</option> 
        <option> dd/MM/yyyy</option> 
        <option>dd/MM/yy</option> 
        <option> MM/dd/yy</option> 
        <option> yyMMdd</option> 
        <option> MMddyy</option> 
        <option> dd.MM.yy</option> 
        <option> MM.dd.yy</option> 
        <option>MM.dd.yy</option> 
        <option>dd/MM</option> 
        <option>dd-MM</option> 
       </select> 
      </div> 
      <div class="form-group"> 
       <label class="form-control">Call Time</label> 
       <select class ="form-control" id="callTime" name="callTime" > 
        <option></option> 
       </select> 
      </div> 
      <br><br> 

      <div class="form-group"> 
       <label class="form-control" >Call Time Format</label> 
       <select id="callTimeFormat" class="form-control" name="CalltimeFormat"> 
        <option>HH:MM:SS/12 HOUR</option> 
        <option>HH:MM:SS/24 HOUR</option> 
        <option> HH:MM/12 HOUR</option> 
        <option> HH:MM/24 HOUR</option> 
        <option> HH:MM/AMPM</option> 
        <option>HHMM/24 HOUR</option> 
       </select> 
      </div> 

      <div class="form-group"> 
       <label class="form-control" >Trunk </label> 
       <input class="form-control" type="text" id="processTrunk" placeholder="Trunk"> 
      </div> 
      <div class="form-group"> 
       <label class="form-control" >Duration </label> 
       <input class="form-control" type="text" id="processDuration" placeholder="Duration"> 
      </div>      
     </form> 
    </div>

這裏的小提琴 http://jsfiddle.net/core972/SMkZV/2/

來源

2015-05-26 Rajeev

試試這個fiddle，

<div class="container"> 
    <form name="registration_form" id='registration_form' class="form-inline"> 
     <div class="row"> 
      <div class="form-group col-xs-6"> 
       <label for="firstname" class="sr-only"></label> 
       <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-6"> 
       <label for="lastname" class="sr-only"></label> 
       <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-6"> 
       <label for="username" class="sr-only"></label> 
       <input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-6"> 
       <label for="password" class="sr-only"></label> 
       <input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password" /> 
      </div> 
     </div> 
    </form> 
</div>

來源

2015-05-26 05:04:34 stanze

有關放置標籤旁邊的輸入字段是什麼？ – Rajeev

因爲您已經使用了這個class =「sr-only」，所以標籤文本被隱藏了。 – stanze

我可以對齊3到4個字段。當我想要3個標籤並在每個標籤旁邊輸入文本時，就會出現問題。所有這一切都在一行中。調整這是一個問題。 – Rajeev

你可以嘗試這樣的：Demo

<form name="registration_form" id='registration_form' class="form-horizontal col-md-8"> 
    <div class="row"> 
     <div class="form-group"> 
      <div class="col-xs-6"> 
       <input id="firstname" class="form-control reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" /> 
      </div> 
      <div class="col-xs-6"> 
       <input id="lastname" class="form-control reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" /> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group"> 
      <div class="col-xs-6"> 
       <input id="username" class="form-control reg_name" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" /> 
      </div> 
      <div class="col-xs-6"> 
       <input id="password" class="form-control reg_name" type="password" name="password" title="Enter password" placeholder="Password" /> 
      </div> 
     </div> 
    </div> 
</form>

與晶標籤Demo

欲瞭解更多詳情，請參閱Bootstrap Forms

來源

2015-05-26 05:05:29

入住這DEMO 1

<form name="registration_form" id='registration_form' class="form-inline"> 
     <div class="row"> 
      <div class="form-group col-xs-6"> 
       <label for="firstname" class="sr-only"></label> 
       <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" 
         title="Enter first name" 
         placeholder="First name"/> 
      </div> 

      <div class="form-group col-xs-6"> 
       <label for="lastname" class="sr-only"></label> 
       <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" 
         title="Enter last name" 
         placeholder="Last name"/> 
      </div> 
     </div> 
<div class="row" style="padding-top: 5px;"> 
      <div class="form-group col-xs-6"> 
       <label for="firstname" class="sr-only"></label> 
       <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" 
         title="Enter first name" 
         placeholder="Username"/> 
      </div> 

      <div class="form-group col-xs-6"> 
       <label for="lastname" class="sr-only"></label> 
       <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" 
         title="Enter last name" 
         placeholder="Password"/> 
      </div> 
     </div> 
</form>

這另一種風格，你可以創建表格Check this DEMO 2

來源

2015-05-26 05:09:18 sheshadri

檢查此 Demo

<form name="registration_form" id='registration_form' class="form-inline "> 
    <div class="row"> 
     <div class="form-group col-xs-6"> 
      <label for="firstname" class="sr-only"></label> 
      <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" 
        title="Enter first name" 
        placeholder="First name"/> 
     </div> 

     <div class="form-group col-xs-6"> 
      <label for="lastname" class="sr-only"></label> 
      <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" 
        title="Enter last name" 
        placeholder="Last name"/> 
     </div> 

    <div class="form-group col-xs-12"> 
     <label for="username" class="sr-only"></label> 
     <input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username" 
       title="Enter username" 
       placeholder="Username"/> 
    </div> 

    <div class="form-group col-xs-12"> 
     <label for="password" class="sr-only"></label> 
     <input id="password" class="form-control input-group-lg" type="password" name="password" 
       title="Enter password" 
       placeholder="Password"/> 
    </div> 
    </div>

來源

2015-05-26 05:41:24

使用引導對齊表單中的字段

回答

相關問題