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

希望这有助于某人。

Answer 2

对于稍后阅读此内容的人，我通常只需将输入包装并在flexbox中提交。您可以在之后为每个元素的外观提供样式（例如：给出表格组宽度：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
  }
}

Answer 3

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

但是如果float不适合你，那就像这样创建你自己的内联类：

.inline { display: inline; }

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

.inline { display: inline-block; }

并将inline类添加到对象中。

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

3 个答案: