与引导程序集成的对齐导轨 form_for 按钮答案

【问题标题】：aligning rails form_for button integrated with bootstrap与引导程序集成的对齐导轨 form_for 按钮
【发布时间】：2014-01-14 20:28:16
【问题描述】：

我不是最擅长 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>

【问题讨论】：

这个有 CSS 吗？您是否尝试过文本对齐提交按钮？

标签： html css ruby-on-rails twitter-bootstrap

【解决方案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 大按钮。

【讨论】：

【解决方案2】：

这一切都可以通过 CSS 轻松完成：

提交按钮的对齐方式：

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

输入字段的大小：

.form-control { width: 150px; }

【讨论】：

如果我改变宽度，表格会变小，这很好。但它看起来很有趣，因为对齐完全关闭了。如何将表单控件移动得更正确，使其看起来更漂亮？

【解决方案3】：

试试这个 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

【讨论】：