使用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在單行上輸入多個輸入

回答

相關問題