Pregunta ¿Cambiar el ancho de la etiqueta de control de bootstrap?


Bootstrap tiene el siguiente 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;
}

Hace que mi forma se vea así:

enter image description here

Las etiquetas están muy lejos hacia la derecha.

Aquí es cómo construyo el formulario:

<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>

¿Cómo puedo hacer esto normal para que las etiquetas comiencen más como aquí? http://bootstrap.stage42.net/doc/forms

Gracias


5
2018-02-05 17:19


origen


Respuestas:


.form-horizontal .control-label  width especifica el "hasta dónde sería el último carácter del texto de la etiqueta desde el lado izquierdo del contenedor principal".

.form-horizontal .controls  margin-left especifica el "hasta qué punto quedaría el borde izquierdo del campo desde el lado izquierdo del contenedor principal".

Esta es una explicación simplificada, pero debe darle suficiente comprensión para tomar el control de sus estilos.

Así que debes ajustar .form-horizontal .control-label  width y .form-horizontal .controls  margin-left Valores proporcionales, para mover campos y etiquetas dentro del contenedor. Proporcional porque se debe preservar el "espacio" entre la etiqueta y el campo. Aquí está el ejemplo:

.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;
}

7
2018-02-06 09:56