5

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

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

在此处输入图像描述

标签在右边。

这是我构建表单的方式：

<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

谢谢

4

1 回答 1

7

.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;
}
于 2013-02-06T09:56:27.927 回答