html - 导轨 : Cocoon gem add and remove fields

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>