对齐rails_for按钮与bootstrap集成

Question

我不是CSS最棒的人。只需按照教程，我的网站添加了一点味道。我的网站注册页面：

如何将按钮与中间对齐？是否可以缩短盒子的长度？

以下是我的注册页面的代码

     <% provide(:title, 'Sign up') %>
        <h1>Sign up</h1>

          <div class="row">
           <div class="span6 offset3">
             <%= form_for(@user, :html => {:class => 'form-horizontal'})  do |f| %>
                <fieldset>

                <div class = "form-group">
                  <%= f.label :name, :class => "col-sm-2 control-label" %>
                  <div class = "col-sm-10">
                  <%= f.text_field :name , :class => "form-control" %>
                 </div>
                </div>
               <div class = "form-group">
                 <%= f.label :email, :class => "col-sm-2 control-label" %>
                 <div class = "col-sm-10">
                   <%= f.text_field :email , :class => "form-control" %>
                 </div>
               </div>

               <div class = "form-group">
                 <%= f.label :password, :class => "col-sm-2 control-label" %>
                 <div class = "col-sm-10">
                   <%= f.password_field :password , :class => "form-control" %>
                </div>
               </div>


              <div class = "form-group">
               <%= f.label :password_confirmation, :class => "col-sm-2 control-label" %>
                 <div class = "col-sm-10">
                   <%= f.password_field :password_confirmation , :class => "form-control" %>
             </div>
         </div>

            <div class = "form-actions">
             <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
            </div>
          </fieldset>
          <% end %>
         </div>
    </div>

Answer 1

看来你正在使用Bootstrap3，而教程是Bootstrap2。

在Bootstrap3中，span6 offset3不起作用。 相反，它必须是这样的：

<% provide(:title, 'Sign up') %>
    <h1>Sign up</h1>

      <div class="row">
         <div class="col-xs-12 col-sm-6 col-sm-offset-3">

此外，通过将btn-large替换为btn-lg，您将获得漂亮的Bootstrap3大按钮。

Answer 2

尝试使用此CSS

div.center, p.center, img.center {
    display: block;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

在您的HTML中

<div class = "center form-actions">
             <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
 </div>

DEMO

Answer 3

使用CSS轻松完成：

提交按钮对齐：

div.form-actions { width: 100%; text-align: center;}

输入字段的大小：

.form-control { width: 150px; }