Simple_form引导样式内联形式无法正常工作

Question

我有一个工作的twitter bootstrap安装和简单的表单生成以下内容:

<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安装等.

上图显示了直接的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_fieldsimple_form 2.0.1为我工作.我的例子是在Contacts表中搜索名称.以下内容使文本框和按钮并排显示:

<%= 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通常假设您希望使用模型和字段名称.上面的示例使用a :symbol而不是a @model作为此处建议的第一个参数.但是仍然会生成一个名为的输入字段,contact[search]因此您必须告诉控制器如何处理它.

我认为在这种情况下,不使用simple_form 可能更简单,而是使用类似于Ryan Bates的Railscast#240,Search,Sort,Paginate与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和controlsdiv类,以便inline-block在它们位于form-inline表单下时显示:

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