中心水平形式的twitter启动 [英] center horizontal-form twitter bootstrap

问题描述

我已经尝试了所有我可能想到的，并看看每一个文档/ tutorials / github readmes。

我正在构建一个简单的rails应用程序，它使用简单的形式和twitter启动。

我希望我的表单位于页面的中心，我可以通过在我的bootstrap css文件中添加这个字段来获取字段移动到中心：

  body {
 text-align：center; 
} 
  

其结果是：

无论我做什么，我无法获取标签 control-label 以与中心对齐。我已经尝试过使用 id 。

这是我的表单的代码：

 <％= simple_form_for @message，：html => {：class => 'form-horizo​​ntal'} do | f | ％> 
 
<％= f.input：phone，：input_html => {：maxlength => 10}，：label_html => {：class => 'control-label'}％> 
<％= f.input：message％> 
 
< div class =form-actionsid =sendbtn> 
<％= f.button：submit，：class => 'btn-primary'％> 
< / div> 
 
<％end％> 
  

和生成的html：

 < div class =container> 
< div class =page-header> 
< h1 id =pagetitle>新邮件< / h1> 
< / div> 
< form id =new_messageclass =simple_form form-horizo​​ntalnovalidate =novalidatemethod =postaction =/ messagesaccept-charset =UTF-8> 
< div style =margin：0; padding：0; display：inline> 
< div class =control-group tel optional> 
< label class =tel optional control-label control-labelfor =message_phone>电话< / label& 
< div class =controls> 
< input id =message_phoneclass =string tel optionaltype =telsize =50name =message [phone]maxlength =10 
< / div> 
< / div> 
< div class =control-group text optional> 
< label class =text optional control-labelfor =message_message> Message< / label> 
< div class =controls> 
< textarea id =message_messageclass =text optionalrows =20name =message [message]cols =40>< / textarea> 
< / div> 
< / div> 
< div id =sendbtnclass =form-actions> 
< input class =btn btn-primarytype =submitvalue =Create Messagename =commit> 
< / div> 
< / form> 
< / div>任何人都可以在这里提供一些支持？
 
 h2_lin>解决方案
在这种情况下，通过通常的方式（使用 margin：0 auto ）居中将不起作用，因为没有附加宽度你的形式，但是你可以通过在你的形式 inline-block 内声明容器div，然后以你的形式为文本居中，使它无论宽度如何， p> 
 
 
  #new_message {
 text-align：center; 
} 
 
 .center {
 display：inline-block; 
} 
  
演示：http://jsfiddle.net/uyKqJ/ ，请点击此处： http://jsfiddle.net/uyKqJ/显示/  
 
I have tried everything I can possibly think of, and looked at every bit of documentation/tutorials/github readmes. 

I am building a simple rails app that is using simple form and twitter bootstrap. 

I would like my form to be in the center of the page and I can get the fields to move to the center by adding this in my bootstrap css file:
body {
    text-align: center;
}
Which results in:



No matter what I do, I cannot get the labels "control-label"s to align to center. I have tried using an id among many other things.

Here is the code for my form:
    <%= 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 %>
and the generated html:
<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>
Please can anyone offer some support here?
解决方案
Centering by usual means (using margin: 0 auto) won't work in this case since there is no width attached to your form, but you can get it to center regardless of width by declaring that container div inside your form inline-block and then text-centering your form, like so:
#new_message {
    text-align:center;
}

.center {
    display:inline-block;
}
Demo: http://jsfiddle.net/uyKqJ/, view here: http://jsfiddle.net/uyKqJ/show/

                        
这篇关于中心水平形式的twitter启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！