centre horizontal-forme twitter bootstrap
J'ai essayé tout ce que je peux éventuellement penser, et regardé tous les bits de la documentation/tutoriels/github fichiers readme.
Je suis la construction d'une simple application rails qui utilise une forme simple et twitter bootstrap.
Je voudrais que mon formulaire pour être dans le centre de la page et je peux obtenir les champs pour se déplacer vers le centre en ajoutant ceci dans mon fichier css de bootstrap:
body {
text-align: center;
}
Qui se traduit par:
Peu importe ce que je fais, je ne peux pas obtenir les labels "control-label
"s aligner au centre. J'ai essayé en utilisant un id
parmi beaucoup d'autres choses.
Voici le code de mon formulaire:
<%= simple_form_for @message, :html => { :class => 'form-horizontal' } do |f| %>
<%= f.input :phone, :input_html => { :maxlength => 10 }, :label_html => { :class => 'control-label' } %>
<%= f.input :message %>
<div class="form-actions" id="sendbtn">
<%= f.button :submit, :class => 'btn-primary' %>
</div>
<% end %>
et le code html généré:
<div class="container">
<div class="page-header">
<h1 id="pagetitle">New Message</h1>
</div>
<form id="new_message" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/messages" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<div class="control-group tel optional">
<label class="tel optional control-label control-label" for="message_phone">Phone</label>
<div class="controls">
<input id="message_phone" class="string tel optional" type="tel" size="50" name="message[phone]" maxlength="10">
</div>
</div>
<div class="control-group text optional">
<label class="text optional control-label" for="message_message">Message</label>
<div class="controls">
<textarea id="message_message" class="text optional" rows="20" name="message[message]" cols="40"></textarea>
</div>
</div>
<div id="sendbtn" class="form-actions">
<input class="btn btn-primary" type="submit" value="Create Message" name="commit">
</div>
</form>
</div>
Svp quelqu'un peut offrir un certain soutien ici?
OriginalL'auteur ohayon | 2012-10-19
Vous devez vous connecter pour publier un commentaire.
Centrage par les moyens habituels (à l'aide de
margin: 0 auto
) ne fonctionne pas dans ce cas puisqu'il n'y a pas de largeur de joint à votre formulaire, mais vous pouvez vous le procurer au centre quelle que soit la largeur en déclarant que le conteneur div à l'intérieur de votre formeinline-block
et puis le texte de centrage de votre formulaire, comme ceci:Démo: http://jsfiddle.net/uyKqJ/, voir ici: http://jsfiddle.net/uyKqJ/show/
_form.html.erb
pour générer le appopriate balisage qui me permettra d'ajouter css de cette façon.je suppose que, plus spécifiquement, que voulez-vous dire par "en déclarant que le conteneur div à l'intérieur de mon formulaire
inline block
?EDIT!!! MERCI!!!!!! J'ai mis un div autour de mon rails balises de formulaire et cela a fonctionné!
im heureux! j'ai utilisé div après la balise form pour centrer le contenu, vous pouvez trouver cette div avec la classe que j'ai utilisé, ` <div class="centre">..</div>`.
OriginalL'auteur Andres Ilich
Ajouter
form {margin:0 auto}
au centre de l'ensemble du formulaire.si vous utilisez
margin: 0 auto;
de l'alignement, de votre sujet ET de ses parents doit être définieposition: relative;
. Sinon, le DOM Moteur de Mise en forme n'a pas de cadre de référence pour "Dessiner" le sujet, au moins en termes de l'Axe des abscisses.OriginalL'auteur bookcasey
Vous devez utiliser
width: some_value
etmargin:auto
au centre de l'ensemble du formulaire. (n'oubliez pasposition:relative;
etdisplay:block;
)form {width: 1080px; margin:auto; position: relative; display: block;}
et toujours rien.oui, c'est correct, mais vous devez définir la forme de la largeur de moins que la largeur de la page
OriginalL'auteur Éderson T. Szlachta