Question

Bootstrap有以下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;
}

这使我的表单看起来像这样：

enter image description here

标签偏离右边。

以下是我构建表单的方法：

<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-label width指定“父容器左侧标签文本的最后一个字符的距离”。

.form-horizontal .controls margin-left指定“从父容器左侧离开边框的距离”。

这是简化的解释，但应该给你足够的理解来控制你的风格。

因此，您应按比例调整.form-horizontal .control-label width和.form-horizontal .controls margin-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;
}

更改自举控制标签宽度？

1 个答案: