À côté du Champ de Formulaire Bootstrap
Je suis en utilisant Bootstrap 3.0.3 et à la suite de la CSS de la documentation (http://getbootstrap.com/css/#forms) pour mettre en œuvre un inline champ de formulaire.
Mon code HTML est:
<form class="form-inline" role="form">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div class="form-group">
<div><%= f.label :login %>
<%= f.text_field :login %></div>
</div>
<div class="form-group">
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<% end %>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
HTML généré:
<form class="form-inline" role="form">
<div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="**" type="hidden"></div>
<div class="form-group">
<div><label for="user_login">Login</label>
<input id="user_login" name="user[login]" type="text"></div>
</div>
<div class="form-group">
<div><label for="user_password">Password</label><br>
<input id="user_password" name="user[password]" type="password"></div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</form> <button type="submit" class="btn btn-default">Sign in</button>
Cependant mon résultat est:
- Quelle est la version de bootstrap utilisez-vous? Pouvez-vous fournir HTML généré? Votre balise de fermeture de la SECTION n'est pas de clôture, il est l'ouverture d'une nouvelle section.
- En supposant que vous utilisez une ancienne version de Bootstrap (< 3.0), ce serait correct de sorte que la première, je voudrais vérifier serait CSS appliqué aux éléments, à savoir tout rembourrage d'être appliqué, ce qui est généralement le coupable pour des colonnes de la grille de rupture de manière incorrecte.
- Im en utilisant Bootstrap 3.0.3
- J'ai mis à jour la question d'inclure davantage d'informations. J'espère qu'elle pourra préciser quelques petites choses.
- S'il vous plaît montrer le code environnant--rendu HTML, pas de serveur-côté des choses. Cela peut être sur le contenant, la forme est en, pas la forme elle-même.
- Juste mis à jour la question
Vous devez vous connecter pour publier un commentaire.
Je pense que c'est parce que vous avez raté cette classe pour vos contrôles d'entrée:
class="form-control"
Envisager d'ajouter de l'espace réservé et le
class="sr-only"
sur les étiquettes.Ref: http://getbootstrap.com/css/#forms-inline
Code:
Démo: http://jsfiddle.net/IrvinDominin/4vsDa/