如何使用simple_form nested_form和bootstrap-sass Rails 4为水平主表单的子记录创建内联表单

Question

I have horizontal form which includes nested form. I would like to have this nested form to be inline. I am not successful. Child form inputs are still horizontal, even I specified form-inline to simple_fields_for.

_form.html.erb

<%= simple_nested_form_for(@cargo, :html => { :class => "form-vertical" }, :wrapper => false) do |f| %>
<% if @cargo.errors.any? %>
<div id="error_explanation">
    <h2><%= pluralize(@cargo.errors.count, "error") %> prohibited this cargo from being saved:</h2>
    <ul>
        <% @cargo.errors.full_messages.each do |msg| %>
        <li>
            <%= msg %>
        </li>
        <% end %>
    </ul>
</div>
<% end %>

<%= f.association :airport, :label_method => :full_airport_name, :value_method => :id , :order => :iata_code %>
<%= f.input :departure_date, as: :date, start_year: Date.today.year, end_year: Date.today.year + 16, order: [:day, :month, :year] %>
<%= f.association :cargo_description, :label_method => :description, :value_method => :id, :order => :description %>
<%= f.association :cargo_price, :label_method => :price, :value_method => :id %>
<div class="js-dependent-fields" data-select-id="cargo_cargo_price_id" data-option-value="1|2">
  <%= f.input :asked_price, as: :integer %>
</div>
<%= f.association :cargo_state, :label_method => :state, :value_method => :id %>

<%= f.simple_fields_for(:cargo_items, @cargo_item, :html => { :class => "form-inline" }) do |cargo_items_fields| %>
  <%= cargo_items_fields.input :pieces, label: t('cargo_item.pieces'), input_html: { value: '1' } %>
  <%= cargo_items_fields.input :length, label: t('cargo_item.length') %>
  <%= cargo_items_fields.input :width , label: t('cargo_item.width') %>
  <%= cargo_items_fields.input :height, label: t('cargo_item.height') %>
  <%= cargo_items_fields.input :weight, label: t('cargo_item.weight_per_piece') %>
  <%= cargo_items_fields.link_to_remove '', :confirm => t('cargo_item.remove_item_confirmation'), :class => "glyphicon glyphicon-remove" %>
<% end %>

<%= f.link_to_add '', :cargo_items, :class => "glyphicon glyphicon-plus" %>

<div class="actions">
    <%= f.button :submit, :class => "btn btn-primary btn-sm" %>
  <%= link_to t('buttons.back_html'), cargos_path, :class => "btn btn-danger btn-sm" %>
</div>
<% end %>

new.html.erb

<div class="row">
  <%= render partial: 'form', layout: 'form-layout', locals: { title: t('titles.title_cargo_new') } %>
</div>

_form-layout.html.erb

<div class="col-md-8">
  <div class="panel panel-info">
    <div class="panel-heading"><%= title %></div>
    <div class="panel-body">
      <%= yield %>
    </div>
  </div>
</div>

Answer 1

Solved by myself by hardcoding inline class inside form, so I donot rely on Simple Form div generator (pasted just nested form with hardcoded solution):

<div class="form-inline">
<%= f.simple_fields_for(:cargo_items, @cargo_item) do |cargo_items_fields| %>
  <%= cargo_items_fields.input :pieces, label: t('cargo_item.pieces'), input_html: { size: '3', type: "" } %>
  <%= cargo_items_fields.input :length, label: t('cargo_item.length'), input_html: { size: '3', type: "" } %>
  <%= cargo_items_fields.input :width , label: t('cargo_item.width'), input_html: { size: '3', type: "" } %>
  <%= cargo_items_fields.input :height, label: t('cargo_item.height'), input_html: { size: '3', type: "" } %>
  <%= cargo_items_fields.input :weight, label: t('cargo_item.weight_per_piece'), input_html: { size: '3', type: "" } %>
  <%= cargo_items_fields.link_to_remove '', :confirm => t('cargo_item.remove_item_confirmation'), :class => "glyphicon glyphicon-remove" %>
<% end %>
<%= f.link_to_add '', :cargo_items, :class => "glyphicon glyphicon-plus" %>
</div>