TwitterのブートストラップとSimple Form 2.0を使用して複数の入力を1行に入力

Question

私はtwitterブートストラップで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> 

私はする必要があります信じているI ような何かを得るために適切なラッパー形式であるかを判断しようとしています[街] [国] [郵便番号]

このラッパーを試してみました

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

私は私もCSSを定義する必要があると考えているが、私はウサギの穴を下に行く前に、私はこれがsomewherに構築されている場合、私は尋ねるだろうと思いましたe。

Answer 1

ラベルは次のように入力するだけlabel_inputコンポーネントを変更したくない場合は、次の

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

、あなたはもう:label => falseを渡す必要はありません。

あなたは誤差成分

Answer 2

代替方法、およびはそれがスロー以来、私は仮定していブートストラップは、（、config.wrappersを提供して必要としないものを使用していないので:error_classが必要とされていません私は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; 
} 

Answer 3

これをsimple_formに持たせることは可能です。これにより、1つのラベルに1行の入力が配置されます。

<%= 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 *'クラスはオプションです。

Answer 4

ブートストラップを使用すると、スパンラッパーを追加できます。

設定/初期化子/ 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" %> 

Answer 5

水平ブートストラップ・フォームのための私のソリューション：

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