ruby-on-rails-3 - 使用 simple_form、nested_form 和 twitter-bootstrap 的嵌套表格式

Question

更新:在进行了一些挖掘并意识到这可能是导致问题的 twitter-bootstrap 之后，我更新了它。

这是我的嵌套表单的粗略版本:

<%= simple_nested_form_for @user, :html => { :class => 'form-horizontal' } do |f| %>
  <fieldset>
    <%= f.input :email %>
    <%= f.input :name_first %>
    <%= f.input :name_last %>

            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Active</th>
                  <th>Company</th>
                  <th>Role</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                  <%= f.simple_fields_for :roles, :wrapper_tag => :tr do |role_form| %>
                    <td><%= role_form.hidden_field :id %><%= role_form.input :active, :label => false, :wrapper => false %></td>
                    <td><%= role_form.association :company, :label => false, :wrapper => false %></td>
                    <td><%= role_form.input :role, :label => false, :collection => [ "Guest", "User", "Inspector", "Owner"], :wrapper => false %></td>
                    <td><%= role_form.link_to_remove "Delete", :class => 'btn btn-mini btn-danger' %>
                    </td>
                  <% end %> 
              </tbody>
            </table>
               <p><%= f.link_to_add "Add a Role", :roles %></p>
        </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', users_path, :class => 'btn' %>
    </div>
  </fieldset>
<% end %>

当它被渲染时，表格行中的字段通过 { :class => 'form-horizontal' }缩进与父表单相同。 .我只想要没有包装器 div 等的字段，但似乎无法弄清楚。我以为 :wrapper => false是票，但到目前为止还没有运气。

担

Answer 1

我最终自己弄清楚了。您必须将表单样式(表单水平)移动到非嵌套字段周围的 div 中:

<%= simple_nested_form_for @user do |f| %>
  <fieldset>
    <div class="form-horizontal">
    <%= f.input :email %>
    <%= f.input :name_first %>
    <%= f.input :name_last %>
    <%= f.input :phone %>
    <%= f.input :mobile %>

    <%= f.input :password %>
    <%= f.input :password_confirmation %>
    </div>
    <div class="tubbable">...