Ruby-on-rails 将 Twitter 引导样式添加到 Rails 表单助手

Adding Twitter bootstrap styling to Rails form helpers

提问by Leahcim

After reading the answer which suggested I use Simple_form gem with bootstrap integration, I installed it and created my form according to simple_form instructions, but the input boxes are floating right.

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

This is the layout. The form is being called with the partial 'shared/reg'

这是布局。正在使用部分“共享/注册”调用该表单

 <div class="container">

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

  </div>
</div>

This is my simple form form

这是我的简单表格

<%= 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 %>

Below you can see how the input boxes are floating right in relation to the submit button.

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

Update

更新

回答by Stephen Potenza

Rather than using the .form-actionsclass, which wraps the submit button in gray block (which might not work for your page design), you can also wrap the button in a control group like this:

除了使用.form-actions将提交按钮包装在灰色块中的类（这可能不适用于您的页面设计）之外，您还可以将按钮包装在一个控制组中，如下所示：

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

This is only really needed if you're using the .form-horizontalclass on the form itself.

仅当您在.form-horizontal表单本身上使用类时才真正需要这样做。

If you're looking for a drop-in replacement form builder that outputs bootstrap-style markup for Rails, you might want to check out a gem that I put together to handle this sort of thing:

如果您正在寻找一个为 Rails 输出引导式标记的插入式替换表单构建器，您可能需要查看我放在一起来处理此类事情的 gem：

https://github.com/potenza/bootstrap_form

https://github.com/potenza/bootstrap_form

Here's how you'd setup a horizontal-style form with the submit button properly lined up:

下面是如何设置一个水平样式的表单，并正确排列提交按钮：

<%= 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 %>

This is the example output:

这是示例输出：

<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>

回答by shuriu

You should try the following:

您应该尝试以下操作：

<%= form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
  <legend>User Registration</legend>

  <div class="control-group">
    <%= f.label :name, class: "control-label" %>
    <div class="controls">
      <%= f.text_field :name %></p>
    </div>
  </div>

  <div class="form-actions">
    <%= f.submit %>
  </div>
</fieldset>

Note that the bootstrap uses some specific selectors for some classes / html elements, so that if you forget to add an element or a class, everything else will be messed up... In this aspect there's no leeway.

请注意，引导程序为某些类/ html 元素使用了一些特定的选择器，因此如果您忘记添加元素或类，其他一切都会被搞砸......在这方面没有余地。

On a side note, you should definitely try simple_form, and the bootstrap integration. It will make your life easier.

附带说明一下，您绝对应该尝试simple_form和引导程序集成。它会让你的生活更轻松。

Update:

更新：

<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
  <legend>User Registration</legend>

  <%= 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 %>

  <div class="form-actions">
    <%= f.submit %>
  </div>
</fieldset>
<% end %>