如何使用Simple Form和Bootstrap在与输入相同的行上定位提交按钮？

Question

使用Simple Form和Bootstrap,我希望以下内容显示为内联而不是输入选择下方的提交按钮.

<%= simple_form_for :select_rollout, :html => {:class => "form-inline"}, do |f| %>
  <%= f.input :rollout_id, collection: @rollout_options, :label => false %>
  <%= f.button :submit, "Apply" %>
<% end %>

以下解决方案仅适用于输入(提交按钮呈现在输入的div之外):

<%= form.input :city, label: 'City/State/Zip', input_html: {class: 'span3'}, wrapper_html: {class: 'controls controls-row'} do %>
  <%= form.input_field :city, class: 'span1' %>
  <%= form.input_field :state, class: 'span1' %>
<% end %>

Answer 1

为了解决这个问题，我需要在输入块中使用input_field，并在块的包装器上使用内联表单样式：

<%= f.input :rollout_id, :label => false, wrapper_html: {class: "form-inline"} do %>
  <%= f.input_field :rollout_id, collection: @rollout_options, :label => false %>
  <%= f.button :submit, "Apply", :class => "btn-primary" %>
<% end %>

希望这可以帮助某人。