如何使用 Simple Form 和 Bootstrap 将提交按钮放置在与输入相同的行上？答案

【问题标题】：How to position submit button on same line as input with Simple Form and Bootstrap?如何使用 Simple Form 和 Bootstrap 将提交按钮放置在与输入相同的行上？
【发布时间】：2018-01-10 17:07:48
【问题描述】：

使用 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 %>

【问题讨论】：

标签： twitter-bootstrap simple-form

【解决方案1】：

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

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

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

对于以后阅读本文的任何人，我通常只是将输入包装并提交到弹性框中。您可以在之后提供您希望每个元素看起来如何的样式（即：给表单组宽度：100%

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


.flexbox-class {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .form-group {
    width: 100%;
  }
  .btn-primary {
    margin-bottom: 16px
  }
}

【讨论】：

【解决方案3】：

尝试将pull-left 或pull-right 类添加到您的元素中。这会将float: left 或float: right 属性添加到您的对象。

但如果 float 不适合您，请创建您自己的名为 inline 的类，如下所示：

.inline { display: inline; }

或（取决于您网站的实施）

.inline { display: inline-block; }

并将inline 类添加到您的对象中。

【讨论】：

感谢您的建议，我尝试了但无济于事。解决方法见下文。