使用Twitter Bootstrap和Simple Form 2.0在单行上输入多个输入

我使用simple_form 2.0和twitter bootstrap。使用Twitter Bootstrap和Simple Form 2.0在单行上输入多个输入

我试图确定什么是为了得到类似的适当的封装格式 [城市] [状态] [邮编]

我相信我的形式必须是

<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为好，但在此之前我下去我想到了一个兔子洞，我会问，如果这是建立在somewher即

来源

2012-02-26 noel_g

如果你不希望标签label_input组件只更改输入这样的：

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

，你不需要通过:label => false了。因为你没有使用误差分量

来源

2012-02-26 05:32:13 rafaelfranca

的另一种方法，和一个不不需要

的:error_class要求自举（其我假定提供config.wrappers，因为这将引发例外在我的项目中，我没有使用TBS）：

<div class="control-group"> 
    <%= 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 %> 
</div>

在你的CSS

然后：

.inline_field_wrapper { 
    display: inline-block; 
}

来源

2012-04-13 04:50:59 soupdog

这可以让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 %>

的“跨度*”类是可选的。

来源

2012-10-17 22:51:41 noel

谢谢！这使我指出了正确的方向。因为我只需要城市标签，所以我最终做了相当于第一行的<％= form.input：city do％>'。 'input_html'似乎没有真正进入输出，并且包装类在我的情况下似乎没有视觉问题。可能取决于你的Bootstrap版本等等。而我用“input-mini”等代替“span1”。只是指出可能会简化。 – 2013-09-03 10:55:58

使用引导可以添加跨度包装。

配置/初始化/ 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" %>

来源

2012-11-14 10:47:10 user1821462

我对水平引导表单解决方案：

.control-group 
    = f.label :password 
    .controls.controls-row 
    = f.input_field :password, :class => 'span2' 
    = f.input_field :password_confirmation, :class => 'span2'

来源

2013-04-20 15:24:40

使用Twitter Bootstrap和Simple Form 2.0在单行上输入多个输入

回答

相关问题