Simple_form引导程序样式内联表单无法正常工作

Question

我有一个正在工作的twitter引导程序安装，并且简单的表单会生成以下内容：

<form accept-charset="UTF-8" action="/find_map" class="simple_form form-inline" id="new_location" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="p5CSoidWaoGMfHY0/3ElWi0XJVg6Cqi9GqWRNlJLBQg=" /></div>
        <div class="control-group string required"><div class="controls"><input class="string required" id="location_address" name="location[address]" placeholder="Address" size="50" type="text" /></div></div><input class="btn" name="commit" type="submit" value="Find!" />
</form>

以某种方式找到“！按钮不会与搜索框显示在同一行。有什么想法吗？

谢谢！

更新：

对不起，我应该提到，所有标记都是由simple_form基于以下内容生成的：

<%= simple_form_for @location, :url => find_map_path, :html => { :class => 'form-inline' } do |f| %>

        <%= f.input :address, :label => false, :placeholder => "Address" %>
        <%= f.submit "Find!", :class => 'btn' %>

<% end %>

所以，实际上，即使我已经为simple_form等运行了bootstrap安装，也似乎与生成的标记有关。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9CTlRSQS5wbmcifQ==” alt =“在此处输入图像描述”>

上面的图片显示了纯HTML格式

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <button type="submit" class="btn">Sign in</button>
</form>

...在simple_form生成的那个之上。

Answer 1

我认为这里有几个问题。一种是格式设置，然后simple_form在输入字段周围添加<div>的方式。 @Ron使用input_field的建议对我来说适用于simple_form 2.0.1。我的示例是在“联系人”表中搜索姓名。下面使文本框和按钮并排显示：

<%= simple_form_for :contact, :method => 'get', 
    :html => { :class => 'form-search' } do |f| %>
  <%= f.input_field :search, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= f.submit "Find!", :class => "btn" %>
<% end %>

另一个问题是，似乎simple_form通常假定您要使用模型名称和字段名称。上面的示例使用:symbol而不是@model作为建议的here作为第一个参数。但这仍然会生成一个名为contact[search]的输入字段，因此您必须告诉您的控制器该如何处理。

我认为在这种情况下，使用[[not使用simple_form可能更简单，而应使用类似于Ryan Bates Railscast #240, Search, Sort, Paginate with AJAX开头的形式的形式：

<%= form_tag contacts_path, :method => 'get', :class => "form-search" do %>
  <%= text_field_tag :search, nil, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= submit_tag "Find!", :name => nil, :class => "btn" %>
<% end %>

现在该字段仅被命名为“搜索”，我可以在控制器的#index方法中使用它，如下所示：
@contacts = @contacts.search(params[:search])

假设我的模型中有这个：
def self.search(search)
  if search
    where('lower(name) LIKE ?', "%#{search.downcase}%")
  else
    scoped
  end
end

Answer 2

正在创建子表单，因为您正在将input传递给simple_form。请改用input_field。 （顺便说一句，这也适用于simple_fields_for）。

Answer 3

您需要自定义control-group和controls div类，使其在inline-block格式下显示为form-inline：

form.form-inline div.control-group { display: inline-block; }
form.form-inline div.control-group div.controls { display: inline-block; }

Answer 4

添加到Mark的回复：

所以，input_field仅用于创建

input

组件，它不会给您任何标签/错误/包装器。这意味着您将不会得到任何内容或标签来包装该字段，因此您应该手动进行操作以防万一。现在关于将表单与对象一起使用，SimpleForm是一个FormBuilder，这意味着它是为与名称空间（对象或符号）一起使用而创建的。 SimpleForm的simple_form_for == Rails的form_for，您

总是

需要一个对象名称空间才能使用。对于这样简单的情况，例如搜索表单，如您所指出的，最好使用简单的表单助手，例如form_tag。我同意，我无需依赖simple_form_for或form_for，通常我会沿着那条路走。

我希望能有所帮助，如果您仍有疑问，请告诉我。

Answer 5

将：html => {：class =>'form-inline'}更改为：html => {：class =>'form-horizo​​ntal'}] >>

Answer 6

您不能将输入按钮移到输入地址旁边吗？我认为它将解决问题

Answer 7

请所有有此问题的人，不要使用混乱的布局，并确保您为文档指定HTML5文档类型。