Rails 样式在 link_to 嵌套表单上丢失答案

【问题标题】：Rails style lost on link_to nested formRails 样式在 link_to 嵌套表单上丢失
【发布时间】：2016-04-19 08:20:00
【问题描述】：

我使用嵌套表单为多个数据输入添加一行表单。但是，使用 link_to 生成的表单上的所有样式都会丢失。查看生成的代码，所有样式都在那里，但是当我添加字段时，它不会呈现样式。我尝试了同时呈现为表格行和 div 行（引导程序）的部分。最初生成的行看起来很完美，但添加的行都被弄乱了，并且没有与任何东西对齐。谢谢！

在 application_helper 中

def link_to_add_fields(name, f, association, readonly)
    new_object = f.object.send(association).klass.new
    id=new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
        render("my partial form", f: builder, readonly: readonly)
    end
    link_to(name, "#", class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})

在我的 new.html 中

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Customer</th>
            <th>Description</th>
            <th>Notes</th>
            <th></th>
        </tr>
    </thead>
<tbody>


    <%= f.fields_for :my_association  do |builder| %>
        <%= render "my_partial", f: builder%>
    <% end %>

false%>

在我的部分中

<tr>
            <td><%= f.collection_select(:customer_id, @customers, :id, :fullname, :include_blank=>'Select') %>
            <%= f.hidden_field(:id)%></td>  
           <td> <%= f.text_field(:description) %></div>         
           <td> <%= f.text_area(:note, :size=> "25x1") %></td>
           <td> <%= f.hidden_field :_destroy %><%= link_to "remove", "#", class: "remove_fields"%> </td>

</tr>

【问题讨论】：

标签： css ruby-on-rails forms twitter-bootstrap nested

【解决方案1】：

这似乎是一个纯 HTML/CSS 问题。

它的<thead> 而不是<theader> 并将部分包装在<tbody> 中

试试这个：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Customer</th>
      <th>Description</th>
      <th>Notes</th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <%= f.fields_for :my_association  do |builder| %>
      <%= render "my_partial", f: builder%>
    <% end %>
  </tbody>
</table>

<div class="container-fluid">
  <div class="row-fluid"><td colspan=6><%= link_to_add_fields "Add New Line", f, :my_association, :readonly=>false%></div></td>
</div>

【讨论】：

这些更改没有任何区别。这些错误是因为我很快将这篇文章的布局更改为表格格式，并且我刚刚尝试使用
布局而不是表格布局，以防万一出现问题。没有变化。

【解决方案2】：

我不得不将我的部分包装在它自己的表中，并取出我对部分调用的行。这打破了桌子，但这是唯一的办法。

new.html.erb

<table class="table table-striped">
    <thead>
        <tr>
            <th>Customer</th>
            ...
            <th>Notes</th>
            <th>*</th>
        </tr>
    </thead>

<tbody>
    <%= f.fields_for :my_association  do |builder| %>

        <%= render "my_partial", f: builder%>
    <% end %>

<tr>
    <td colspan=6>
<%= link_to_add_fields "Add New Line", f, :my_association, :readonly=>false%>
</td></tr>
</tbody>
</table>

在我的部分

<table class="table table-striped">
    <tbody>
    <tr style="width:100%">
            <td><%= f.collection_select(:customer_id, @customers, :id, :fullname, :include_blank=>'Select') %>

            ...

           <td> <%= f.text_area(:note, :size=> "25x1") %></td>
           <td> <%= f.hidden_field :_destroy %><%= link_to "remove", "#", class: "remove_fields"%> </td>

</tr>
</tbody>
</table>

我希望有更好的解决方案，但这暂时可行。

【讨论】：