ruby-on-rails - 将 Twitter Bootstrap 样式添加到 Rails 表单助手

Question

在阅读了建议我将 Simple_form gem 与 Bootstrap 集成一起使用的答案后，我安装了它并根据 simple_form 说明创建了我的表单，但输入框向右浮动。

这是布局。使用部分“shared/reg”调用表单

 <div class="container">

  <div class="row">
   <div class="span8"><%= yield %></div>
   <div class="span4">
   <%= render 'shared/reg' %>
   </div>

  </div>
</div>

这是我的简单表格

<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
  <%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
  <%= f.input :country,  :collection => [ "Canada", "Iceland", "Other"] %>
  <%= f.input :email %>
   <%= f.input :image, :as => :file %>
    <%= f.input :password %>
  <%= f.input :password_confirmation %>
 <%= f.button :submit %>
<% end %>

您可以在下面看到输入框是如何相对于提交按钮向右浮动的。

更新

Answer 1

而不是使用 .form-actions类，它将提交按钮包装在灰色 block 中(这可能不适用于您的页面设计)，您还可以将按钮包装在一个控制组中，如下所示:

  <div class="control-group">
    <div class="controls">
      <%= f.button :submit %>
    </div>
  </div>

仅当您使用 .form-horizontal 时才真正需要此功能。表单本身的类。

如果您正在寻找为 Rails 输出 Bootstrap 式标记的插入式替换表单构建器，您可能需要查看我为处理此类事情而整理的 gem:

https://github.com/potenza/bootstrap_form

以下是设置提交按钮正确排列的水平样式表单的方法:

<%= bootstrap_form_for(@user, html: { class: 'form-horizontal' }) do |f| %>
  <%= f.text_field :email %>
  <%= f.password_field :password %>
  <%= f.password_field :password_confirmation, label: 'Confirm Password' %>
  <%= f.control_group do %>
    <%= f.primary "Save User" %>
  <% end %>
<% end %>

这是示例输出:

<form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post">
  <div class="control-group">
    <label class="control-label" for="user_email">Email</label>
    <div class="controls">
      <input id="user_email" name="user[email]" size="30" type="text" />
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="user_password">Password</label>
    <div class="controls">
      <input id="user_password" name="user[password]" size="30" type="password" />
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="user_password_confirmation">Confirm Password</label>
    <div class="controls">
      <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <input class="btn btn-primary" name="commit" type="submit" value="Save User" />
    </div>
  </div>
</form>