更改引导程序的控制标签宽度？答案

【问题标题】：Changing bootstrap's control label width?更改引导程序的控制标签宽度？
【发布时间】：2013-01-20 17:09:13
【问题描述】：

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

谢谢

【问题讨论】：

也许只有我一个人，但我看不出链接上的标签与您的屏幕截图有何不同？两个节目标签都右对齐？
你可能想从官方的 twitter bootstrap 网站阅读...twitter.github.com/bootstrap

标签： c# asp.net css twitter-bootstrap

【解决方案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;
}

【讨论】：