bootstrap: form-ngang không tạo kiểu tóc như mong đợi

Question

Tôi đang sử dụng twitter bootstrap và muốn có một hình thức ngang như thể hiện trong bản demo ở đây: http://twitter.github.com/bootstrap/base-css.html#forms

Tuy nhiên, tôi nhận được một loại hình thức dọc Tôi đoán có nhãn kiểm soát quá mức, tôi không thể tìm thấy lý do kiểu dáng biểu mẫu dọc không hoạt động.

Đây là mã html (được tạo ra với khuôn khổ 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> 

Có điều gì tôi đang làm sai

Answer 1

Bạn cần phải áp dụng các lớp .control-label để nhãn của bạn và tách đầu vào của bạn bên trong một? .controls vùng chứa cho các kiểu dáng của bạn để áp dụng chính xác. Hãy thử thay thế này:

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