使用Twitter Bootstrap和Simple Form 2.0在一行中输入多个输入
我正在使用带有twitter bootstrap的simple_form 2.0。
我试图确定什么是正确的包装格式，以获得像[city] [State] [Zip]这样的东西
我相信我的forms需要
:small, :placeholder => "City", :input_html => { :class=>"span2", :maxlength => 10},:label => false %> :small , :placeholder => "Region", :input_html => { :class=>"span1", :maxlength => 5}, :label => false %> :small, :placeholder => "Postal Code",:input_html => { :class=>"span2", :maxlength => 10},:label => false %> 我试过这个包装器
config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs', :error_class => 'error' do |b| b.use :placeholder b.use :label_input end
我相信我也需要定义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' %> <% end %>
‘span *’类是可选的。
使用Bootstrap可以添加span包装器。
配置/初始化/ simple_form_bootsptrap.rb
config.wrappers :span3, :tag => 'div', :class => 'span3', :error_class => 'error' do |b| b.use :html5 b.use :placeholder b.use :label b.wrapper :tag => 'div', :class => 'controls' do |ba| ba.use :input ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' } ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' } end end
应用程序/资产/样式表/ bootstrap_and_overrides.css.less
@red: #B94A48; .control-group { clear: both; } .error .controls .help-inline{ color: @red; } .error .control-label { color: @red; } .error .controls select{ border: 1px solid #B94A48; }
_form.html.rb
<%= f.input :city, :wrapper =>"span3" %> <%= f.input :region, :wrapper =>"span3" %> <%= f.input :postal_code, :wrapper =>"span3" %>
如果您不希望标签将label_input组件更改为仅输入如下：
config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs' do |b| b.use :placeholder b.use :input end
而且你不需要再传递:label => false 。
由于您未使用错误组件，因此不需要:error_class
另一种方法，并且不需要 bootstrap（我假设提供了config.wrappers，因为它在我不使用TBS的项目中抛出exception）：
<%= f.input :city, :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "City", :input_html => { :maxlength => 10}, :label => false %> <%= f.input :region, :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "Region", :input_html => { :maxlength => 5}, :label => false %> <%= f.input :postal_code, :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "Postal Code", :input_html => { :maxlength => 10}, :label => false %>
然后在你的CSS中：
.inline_field_wrapper { display: inline-block; }
我的横向引导forms的解决方案：
.control-group = f.label :password .controls.controls-row = f.input_field :password, :class => 'span2' = f.input_field :password_confirmation, :class => 'span2'