将Twitter Bootstrap样式添加到Rails表单助手

Question

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

这是布局。使用partial '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 %>

以下是输入框相对于提交按钮向右浮动的示例。

更新

- Leahcim

Answer 1

如果你不想使用 .form-actions 类（它会用灰色块包裹提交按钮，这可能与你的页面设计不符），你也可以像这样将按钮包裹在控制组中：

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

- Stephen Potenza

Answer 2

你应该尝试以下方法：

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

请注意，Bootstrap对于某些类/HTML元素使用了特定的选择器，因此如果您忘记添加元素或类，则其他所有内容都会混乱... 在这方面没有任何余地。

另外，您应该尝试使用simple_form和Bootstrap集成，这将使您的生活更加轻松。

更新：

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

- shuriu

---

感谢您提供简单的表单建议。然而，当我尝试使用它时，仍然遇到了同样的问题。我已经在原帖中更新了信息和图片。有任何想法吗？ - Leahcim

我更新了我的回答。试一下，现在应该可以工作了。再次注意HTML，否则所需的CSS将无法应用。所有简单表格 - Bootstrap所做的就是向输入添加包装器，但它不会在提交周围添加fieldset和form-actions div。 - stfcodes

这很有趣，因为 simple_form 的 Github 页面上没有应用 class form-actions 的示例。 - Leahcim

只是快速评论。@shuriu，你打错字了。在第二个例子中，你没有关闭 fieldset :) - NikoRoberts