title: How to create inline form for child records in horizontal main form with simple_form nested_form and bootstrap-sass Rails 4
body: <p>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.</p>
  
  <p>_form.html.erb</p>
  
  <pre><code>&lt;%= simple_nested_form_for(@cargo, :html =&gt; { :class =&gt; "form-vertical" }, :wrapper =&gt; false) do |f| %&gt;
  &lt;% if @cargo.errors.any? %&gt;
  &lt;div id="error_explanation"&gt;
      &lt;h2&gt;&lt;%= pluralize(@cargo.errors.count, "error") %&gt; prohibited this cargo from being saved:&lt;/h2&gt;
      &lt;ul&gt;
          &lt;% @cargo.errors.full_messages.each do |msg| %&gt;
          &lt;li&gt;
              &lt;%= msg %&gt;
          &lt;/li&gt;
          &lt;% end %&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;% end %&gt;
  
  &lt;%= f.association :airport, :label_method =&gt; :full_airport_name, :value_method =&gt; :id , :order =&gt; :iata_code %&gt;
  &lt;%= f.input :departure_date, as: :date, start_year: Date.today.year, end_year: Date.today.year + 16, order: [:day, :month, :year] %&gt;
  &lt;%= f.association :cargo_description, :label_method =&gt; :description, :value_method =&gt; :id, :order =&gt; :description %&gt;
  &lt;%= f.association :cargo_price, :label_method =&gt; :price, :value_method =&gt; :id %&gt;
  &lt;div class="js-dependent-fields" data-select-id="cargo_cargo_price_id" data-option-value="1|2"&gt;
    &lt;%= f.input :asked_price, as: :integer %&gt;
  &lt;/div&gt;
  &lt;%= f.association :cargo_state, :label_method =&gt; :state, :value_method =&gt; :id %&gt;
  
  &lt;%= f.simple_fields_for(:cargo_items, @cargo_item, :html =&gt; { :class =&gt; "form-inline" }) do |cargo_items_fields| %&gt;
    &lt;%= cargo_items_fields.input :pieces, label: t('cargo_item.pieces'), input_html: { value: '1' } %&gt;
    &lt;%= cargo_items_fields.input :length, label: t('cargo_item.length') %&gt;
    &lt;%= cargo_items_fields.input :width , label: t('cargo_item.width') %&gt;
    &lt;%= cargo_items_fields.input :height, label: t('cargo_item.height') %&gt;
    &lt;%= cargo_items_fields.input :weight, label: t('cargo_item.weight_per_piece') %&gt;
    &lt;%= cargo_items_fields.link_to_remove '', :confirm =&gt; t('cargo_item.remove_item_confirmation'), :class =&gt; "glyphicon glyphicon-remove" %&gt;
  &lt;% end %&gt;
  
  &lt;%= f.link_to_add '', :cargo_items, :class =&gt; "glyphicon glyphicon-plus" %&gt;
  
  &lt;div class="actions"&gt;
      &lt;%= f.button :submit, :class =&gt; "btn btn-primary btn-sm" %&gt;
    &lt;%= link_to t('buttons.back_html'), cargos_path, :class =&gt; "btn btn-danger btn-sm" %&gt;
  &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>new.html.erb</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;%= render partial: 'form', layout: 'form-layout', locals: { title: t('titles.title_cargo_new') } %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>_form-layout.html.erb</p>
  
  <pre><code>&lt;div class="col-md-8"&gt;
    &lt;div class="panel panel-info"&gt;
      &lt;div class="panel-heading"&gt;&lt;%= title %&gt;&lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;%= yield %&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>