2012-07-12 13 views
6

Używam twitter bootstrap i chciałby mieć formę poziomej, jak pokazano w demo tutaj: http://twitter.github.com/bootstrap/base-css.html#formsbootstrap: formularz-poziomej nie stylizacja jak oczekiwano

Jednak uzyskać rodzaj postaci pionowej Chyba z etykietami nad kontrolą, nie mogę stwierdzić, dlaczego styl pionowej formy nie działa.

Oto kod html (generowane z Symfony2 ram:

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

Czy coś robię źle

Odpowiedz

9

Trzeba zastosować klasę .control-label do etykiet i oddzielić wejść Wewnątrz? .controls Kontener do poprawnego zastosowania stylów formularzy. Spróbuj tego zamiast:

<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> 
Powiązane problemy