twitter-bootstrap - 如何使用 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

为了解决这个问题，我需要使用 输入字段 在输入 block 内，并使用 内联表单 block 包装器上的样式:

<%= 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 %>

希望这可以帮助某人。