简单表格标签类答案

【问题标题】：Simple form label class简单表格标签类
【发布时间】：2014-04-24 05:04:30
【问题描述】：

我想使用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>

【问题讨论】：

是什么阻止你为你的标签定义一个类
我也遇到了同样的问题...

标签： ruby-on-rails-3 twitter-bootstrap simple-form

【解决方案1】：

在您的config/initializers/simple_form.rb 文件中，找到标注分类行并将其设置为：

config.label_class = 'control-label'

此外，如果您使用的是引导程序，您可以在此文件中执行一些其他操作。这也可能对您有所帮助：

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

【讨论】：

感谢您的回复，但我已经将 label_class 设置为 'control-label' 并且它似乎适用于 email 字段。我不确定为什么它不适用于我指定标签文本的标签。

【解决方案2】：

根据this，您必须按照以下方式做一些事情：

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

【讨论】：