bootstrap：form-horizontal 没有按预期设计答案

【问题标题】：bootstrap: form-horizontal not styling as expectedbootstrap：form-horizontal 没有按预期设计
【发布时间】：2013-02-16 06:06:20
【问题描述】：

我正在使用 twitter 引导程序，并希望有一个水平形式，如这里的演示所示：http://twitter.github.com/bootstrap/base-css.html#forms

但是，我猜想有一种垂直表单，其标签超过了控件，我找不到垂直表单样式不起作用的原因。

这里是html代码（使用symfony2框架生成：

<form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
    <label class=" required" for="fos_user_registration_form_email" placeholder="Email">Email:</label>
    <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>
        <label class=" required" for="fos_user_registration_form_plainPassword_Enter Password: ">Enter password: </label>
        <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>
      <label class=" required" for="fos_user_registration_form_plainPassword_Verify Password: ">Verify password: </label>
    <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>
   etc...
</form>

是不是我做错了什么？

【问题讨论】：

标签： forms twitter-bootstrap

【解决方案1】：

您需要将.control-label 类应用于您的标签，并将您的输入分隔在.controls 容器中，以便您的表单样式正确应用。试试这个：

<form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
    <div class="control-group">
        <label class="control-label 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>

【讨论】：