茧：改变其中加入表单字段呈现

Question

我有一个使用茧动态添加表单字段的形式。问题是与造型。表单字段在错误的地点被添加。这里是我的代码：

<div class="col-md-5>
    <!--content here !-->
</div>
<div class="col-md-2">
    <!-- more content here !-->
</div>
<%= form_for @owner do |f| %>
    <div class="col-md-4">
        <%= f.fields_for :cars do |car| %>
            <%= render 'cars_fields', :f => car %>
        <% end %>

        <div class="row text-center center-block">
            <%= f.submit "send", class: 'btn btn-default' %>
        </div>  
    </div>
    <div class="col-md-1">
        <%= link_to_add_association f, :cars, class: 'btn bgm-cyan btn-float waves-effect' do %>
            <i class="md md-add"></i>
        <% end %>
    </div>
<% end %>

下面是部分car_fields的代码：

<div class="form-group" style="padding: 10px 40px;" >
    <%= f.text_field :make, class: 'form-control input-sm', placeholder: "Car Make"%>
</div>

我想link_to_add_association按钮是表单的权利。当按下时，我希望新的表单字段出现内部col-md-4。相反，它是出现下面的所有网页上的内容。如何使新的表单字段出现内部col-md-4？我认为这是与data-association-insertion-node或data-association-insertion-method但文档已经很难。

Answer 1

从文档https://github.com/nathanvda/cocoon

data-association-insertion-node：节点的jQuery选择。默认值：父节点

data-association-insertion-method：该插入新数据的jquery方法。前，后，追加，前插，等默认值：前

data-association-insertion-traversal：jquery的遍历方法，以允许相对于连杆节点选择。最近，未来，儿童等默认值：绝对的选择

因此，通过使用默认的遍历方法是absolute，你可以去这样的事情

<%= form_for @owner do |f| %>
<div id="place-to-insert" class="col-md-4">
    <%= f.fields_for :cars do |car| %>
        <%= render 'cars_fields', :f => car %>
    <% end %>

    <div class="row text-center center-block">
        <%= f.submit "send", class: 'btn btn-default' %>
    </div>  
</div>
<div class="col-md-1">
    <%= link_to_add_association f, :cars, class: 'btn bgm-cyan btn-float waves-effect0', data: {association_insertion_method: "append", association_insertion_node: "#place-to-insert"} do %>
        <i class="md md-add"></i>
    <% end %>
</div>