6

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

3 回答 3

5

为了解决这个问题，我需要在输入块中使用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 %>

希望这可以帮助某人。

于 2013-04-10T08:47:32.580 回答
1

对于以后阅读本文的任何人，我通常只是将输入包装并提交到弹性框中。您可以在之后提供您希望每个元素看起来如何的样式（即：给表单组宽度：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
  }
}
于 2018-01-10T09:07:48.727 回答
0

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

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

.inline { display: inline; }

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

.inline { display: inline-block; }

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

于 2013-04-09T14:44:27.493 回答