2013-04-29 66 views
3

我想使用simple-formbootstrap生成一個2行的水平表單。第一行應該有兩個並排的輸入 - 一個用於帶有一個標籤的名字,第二行應該有一個用於電子郵件的輸入。我的問題是,第一行的標籤沒有得到正確呈現水平表單所需的control-label類。然而,所有適當的類別正在應用於email字段。簡單形式標籤類

下面是我的代碼:

= simple_form_for @order, :url => '/product/process_order', :html => {:class => 'form-horizontal'} do |f| 
    .form-inputs 
    .control-group 
     = f.label :first, "Full and last name" 
     .controls 
     = f.input_field :first, :class => "span2", :placeholder => 'First' 
     = f.input_field :last, :class => "span3" , :placeholder => 'Last' 

    = f.input :email, :placeholder => '[email protected]' 

產生:

<form accept-charset="UTF-8" action="/product/process_order" class="simple_form form-horizontal" id="new_order" method="post" novalidate="novalidate"> 
    <div class="form-inputs"> 
    <div class="control-group"> 
     <label for="order_first">Full and last name</label> 
     <div class="controls"> 
      <input class="string required span2" id="order_first" name="order[first]" placeholder="First" size="50" type="text"> 
      <input class="string required span3" id="order_last" name="order[last]" placeholder="Last" size="50" type="text"> 
     </div> 
    </div> 
    <div class="control-group email required"> 
     <label class="email required control-label" for="order_email"> 
     <abbr title="required">*</abbr> Email 
     </label> 
     <div class="controls"><input class="string email required" id="order_email" name="order[email]" placeholder="[email protected]" size="50" type="email"></div> 
    </div> 
    </div> 
</form> 
+0

什麼停止u到定義一個類爲您的標籤反正 – Viren 2013-04-30 14:54:16

回答

1

在你config/initializers/simple_form.rb文件,找到標籤班線,並將其設置爲:

config.label_class = 'control-label' 

另外,如果你正在使用bootstrap,你可以在這個文件中做一些其他的事情。這也可能幫助您:

SimpleForm.setup do |config| 
    config.wrappers :my_wrapper, :class => 'control-group', 
    :hint_class => :field_with_hint, :error_class => :field_with_errors do |b| 

    b.use :html5 

    b.use :placeholder 

    b.optional :maxlength 

    b.optional :pattern 

    b.optional :min_max 

    b.optional :readonly 

    ## Inputs 
    b.use :label 
    b.wrapper :my_wrapper, :tag => 'div', :class => 'controls' do |ba| 
     ba.use :input 
     ba.use :error, :wrap_with => { :tag => 'span', :class => 'label label-important' } 
     ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' } 
    end 
    end 

    config.default_wrapper = :my_wrapper 

    config.boolean_style = :nested 

    config.button_class = 'btn' 

    config.error_notification_tag = :div 

    config.error_notification_class = 'alert alert-error' 

    config.label_class = 'control-label' 

    config.form_class = 'form-horizontal' 

    config.generate_additional_classes_for = [:wrapper, :label, :input] 
    config.browser_validations = true 
end 
+0

謝謝您響應,但我已經將'label_class'設置爲''control-label'',並且它對於'email'字段似乎正常工作。我不確定爲什麼它不適用於我指定標籤文本的標籤。 – sguha 2013-04-30 23:13:26

1

根據this你一起做這個東西線:

f.label :first, label: 'Full and last name'