在 input 和 =f.input 之间使用 simple_form 时遇到问题答案

【问题标题】：Trouble using simple_form between input and =f.input在 input 和 =f.input 之间使用 simple_form 时遇到问题
【发布时间】：2013-03-14 11:54:26
【问题描述】：

这是以下超薄 simple_form 表单的屏幕截图。这显示正确。但这给了我输入 nil 错误。

  = simple_form_for :identity, :url => '/auth/identity/register' do |f| 
  h2 Create New Account

  .form-actions
    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          input type="text", label:false, :class => "inline"

    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          input type="text" id="" name="" f:email


    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          input type="text" id="" name="" f:password

    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          input type="text" id="" name="" f:password_confirmation

    .control-group
        .controls
          = f.button :submit, :class => 'btn-primary'

这是下面代码的截图。这工作正常（不给出 nil 类型错误。因为它需要模型字段。）但是外观被打破了。

= simple_form_for :identity, :url => '/auth/identity/register' do |f| 
  h2 Create New Account

  .form-actions
    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          =f.input :name, label:false

    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          = f.input :email, label:false


    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          = f.input :password, label:false

    .control-group
      .controls
        .input-prepend
          span.add-on
            i.icon-user
          = f.input :password_confirmation, label:false

    .control-group
        .controls
          = f.button :submit, :class => 'btn-primary'

【问题讨论】：

可能是"=f.input :name, label:false" 这行代码'='和'f'这里没有用空格隔开。
你注意到了吗？
我注意到了。但麻烦不在于。
您应该坚持使用模型字段并使用一些 CSS 样式深入到 HTML 中，以使字段看起来像您想要的那样。
你检查你的源代码了吗？您的输入可能在一个 div 中（这是 simple_form 的默认情况），而 div 是一个块元素。

标签： ruby-on-rails ruby twitter-bootstrap simple-form slim-lang

【解决方案1】：

您可以使用安装生成器获取 simple_form 以生成 twitter 引导表单

rails generate simple_form:install --bootstrap

您不必这样做，但它会使您的表单更简单！请参阅文档https://github.com/plataformatec/simple_form

然后要回答您的实际问题，您可以像这样添加您的用户图标

= f.input :email, :wrapper => :append do
  = f.input_field :email
   %span.add-on>
     %i.icon-user

附加组件之后的 > 停止 haml 放入一个新行，该行将分隔跨度和输入。有关更多详细信息，请参阅此答案Append/prepend bootstrap icons with simple_form

【讨论】：