带有 Twitter Bootstrap 和 Simple Form 2.0 的单行多个输入 [英] Multiple inputs on a single line with Twitter Bootstrap and Simple Form 2.0

问题描述

我正在使用 simple_form 2.0 和 twitter bootstrap.

我正在尝试确定什么是正确的包装器格式以获得类似的东西[城市] [州] [邮编]

我认为我的表单需要

<%= f.input :city,:wrapper =>:small, :placeholder =>"城市", :input_html =>{ :class=>"span2", :maxlength =>10},:label =>假%><%= f.input :region, :wrapper =>:small , :placeholder =>"区域", :input_html =>{ :class=>"span1", :maxlength =>5}, :label =>假%><%= f.input :postal_code, :wrapper =>:small, :placeholder =>"邮政编码",:input_html =>{ :class=>"span2", :maxlength =>10},:label =>假%>

我试过这个包装器

 config.wrappers :small, :tag =>'div', :class =>'控制内联输入', :error_class =>'错误' 做 |b|b.使用:占位符b. 使用 :label_input结尾

我相信我也需要定义 CSS，但在我陷入困境之前，我想我会问这是否内置于某个地方.

解决方案

可以让 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' %><%结束%>

'span*' 类是可选的.

I am using simple_form 2.0 with twitter bootstrap.

I am trying to determine what is the proper wrapper format in order to get something like [city] [State] [Zip]

I believe my form needs to be

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

I tried this wrapper

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

I believe I would need to define the CSS as well, but before I go down a rabbit hole I thought I would ask if this is built in somewhere.

解决方案

It is possible to have simple_form do this. This places the inputs on one row with a single label:

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

The 'span*' classes are optional.

这篇关于带有 Twitter Bootstrap 和 Simple Form 2.0 的单行多个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！