更改引導程序的控件標籤寬度？

Question

引導具有以下CSS：

.form-horizontal .control-label { 
    float: left; 
    width: 160px; 
    padding-top: 5px; 
    text-align: right; 
} 

.form-horizontal .controls { 
    *display: inline-block; 
    *padding-left: 20px; 
    margin-left: 180px; 
    *margin-left: 0; 
} 

這讓我的形式是這樣的：

標籤是遙遠的權利。

這裏是我建的形式：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
    <div id="kez_header"> 


     <table class="style1"> 
      <tr> 
       <td> 
        <h4> Add Group 
        </h4> 
       </td> 
       <td align="right" valign="middle"> 

       </td> 
      </tr> 
      </table> 

      <div id="new_group_view" class="form-horizontal"> 
      <form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/"> 
    <div class="control-group"> 
     <label class="control-label control-label-me required" for="fos_user_registration_form_email" placeholder="Email">Email:</label> 
     <div class="controls"> 
      <input id="fos_user_registration_form_email" class="text-style" type="email" placeholder="Email" required="required" name="fos_user_registration_form[email]"> 
      <div placeholder="Password" id="fos_user_registration_form_plainPassword"></div> 
     </div> 
    </div> 

    <div class="control-group"> 
     <label class="control-label required" for="fos_user_registration_form_plainPassword_Enter Password: ">Enter password: </label> 
     <div class="controls"> 
      <input type="password" required="required" name="fos_user_registration_form[plainPassword][Enter Password: ]" id="fos_user_registration_form_plainPassword_Enter Password: " class="text-style"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label required" for="fos_user_registration_form_plainPassword_Verify Password: ">Verify password: </label> 
     <div class="controls"> 
      <input type="password" required="required" name="fos_user_registration_form[plainPassword][Verify Password: ]" id="fos_user_registration_form_plainPassword_Verify Password: " class="text-style"> 
     </div> 
    </div> 
</form> 
      </div> 
    </div> 
</asp:Content> 

我怎樣才能得到這個正常的，這樣的標籤開始更喜歡這裏： http://bootstrap.stage42.net/doc/forms

感謝

Answer 1

.form-horizontal .control-labelwidth指定「距離父容器左側的標籤文本的最後一個字符有多遠「。

.form-horizontal .controlsmargin-left指定「離父容器左側字段的左邊距有多遠」。

這是簡單的解釋，但應該給你足夠的理解來控制你的風格。

因此，您應該按比例調整.form-horizontal .control-labelwidth和.form-horizontal .controlsmargin-left值，以移動容器內的字段和標籤。按比例應該保留標籤和字段之間的「空間」。這裏是例子：

.form-horizontal .control-label { 
    float: left; 
    width: 120px; /* changed from 160px to 120px */ 
    padding-top: 5px; 
    text-align: right; 
} 

.form-horizontal .controls { 
    *display: inline-block; 
    *padding-left: 20px; 
    margin-left: 140px; /* changed from 180px to 140px */ 
    *margin-left: 0; 
}