Question

我想使用simple-form和bootstrap生成一个包含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 => 'you@example.com'

生成：

<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="you@example.com" size="50" type="email"></div>
     </div>
   </div>
 </form>

Answer 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

Answer 2

根据this，你必须做一些事情：

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

简单的表单标签类

2 个答案: