Rails: Cocoon gem 添加和删除字段

Question

我正在使用 cocoon gem 并尝试水平内联三个嵌套字段和一个删除按钮。我已经做到了，但是正如您从我附上的图片中看到的那样，input-group（三个输入和删除按钮）的宽度不会 100% 扩展到其他字段的宽度。我怎样才能水平内联三个输入字段，将删除按钮放在右边并扩展所有内容以匹配其他字段的宽度？我也对三个输入和删除按钮的排列的其他想法持开放态度。

<div class="nested-fields">
  <div class="input-group" style="width:100%;">
    <%= form.input :day, :as => :select, :collection => [["Monday", 1],["Tuesday", 2],["Wednesday", 3],["Thursday", 4],["Friday", 5],["Saturday", 6],["Sunday", 0]],
                   :include_blank => "Select a day", label: false, input_html: { class: "form-control" } %>

    <%= form.input :opens, as: :time, twelve_hour: true, minute_step: 15, ampm: true , label: false, input_html: { class: "form-control", style: "width:100%;" }  %>

    <%= form.input :closes, as: :time, twelve_hour: true, minute_step: 15, ampm: true , label: false, input_html: { class: "form-control", style: "width:100%;" }   %>

    <%= form.input :store_id, :as => :hidden, :input_html => { :value => @store.id } %>

    <div class="links">
      <%= link_to_remove_association "Remove", form, :class => "btn btn-light btn-m" %>
    </div>
  </div>
</div>

更新 1

根据 eikes 的回答，我得到了这个：

Answer 1

我假设您正在使用 simple_form 生成 html，它会在每个输入周围生成一个包装器 div。您可以通过向 input 调用添加 wrapper_html 选项来影响此元素，例如：

<div class="nested-fields">
  <div class="input-group">
    <%= form.input :day, 
                   as:            :select,
                   collection:    [["Monday", 1],["Tuesday", 2],["Wednesday", 3],["Thursday", 4],["Friday", 5],["Saturday", 6],["Sunday", 0]],
                   include_blank: "Select a day",
                   label:         false,
                   input_html:    { class: "form-control" },
                   wrapper_html:  { style: "width: 25%; display: inline;" } %>

    <%= form.input :opens,
                   as:           :time,
                   twelve_hour:  true,
                   minute_step:  15,
                   ampm:         true,
                   label:        false,
                   input_html:   { class: "form-control" },
                   wrapper_html: { style: "width: 25%; display: inline;" } %>

    <%= form.input :closes,
                   as:           :time,
                   twelve_hour:  true,
                   minute_step:  15,
                   ampm:         true,
                   label:        false,
                   input_html:   { class: "form-control" },
                   wrapper_html: { style: "width: 25%; display: inline;" } %>

    <%= form.input :store_id,
                   as:         :hidden,
                   input_html: { value: @store.id } %>

    <div class="links" style="width: 25%; display: inline;">
      <%= link_to_remove_association "Remove", form, class: "btn btn-light btn-m" style="width: 100%;" %>
    </div>
  </div>
</div>

Rails: Cocoon gem 添加和删除字段

Rails: Cocoon gem add and remove fields

html

css

forms

cocoon-gem