使用Twitter Bootstrap和Simple Form 2.0在一行中输入多个输入

Question

我正在使用带有twitter bootstrap的simple_form 2.0.

我试图确定什么是正确的包装器格式,以获得像[city] [State] [Zip]这样的东西

我相信我的形式需要

<div class="control-group">
  <%= f.input :city,:wrapper => :small, :placeholder => "City", :input_html => { :class=>"span2", :maxlength => 10},:label => false %>
  <%= f.input :region, :wrapper => :small , :placeholder => "Region", :input_html => { :class=>"span1", :maxlength => 5}, :label => false %>
  <%= f.input :postal_code, :wrapper => :small,  :placeholder => "Postal Code",:input_html => { :class=>"span2", :maxlength => 10},:label => false %>
</div>

我试过这个包装器

  config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs', :error_class => 'error' do |b|
    b.use :placeholder
    b.use :label_input
  end

我相信我也需要定义CSS,但在我走下兔子洞之前,我想我会问这是否是在某个地方建造的.

Answer 1

simple_form可以这样做.这会将输入放在一行中,并带有一个标签:

<%= 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' %>
  <%= form.input_field :zip, class: 'span1' %>
<% end %>

'span*'类是可选的.