如何垂直显示 simple_form答案

【问题标题】：how to show simple_form vertically如何垂直显示 simple_form
【发布时间】：2014-08-10 16:26:55
【问题描述】：

= simple_form_for @session, :as => 'session', :url => session_path do |form|
  %form
    .form-group
      .form
        = form.input :email

      .form
        = form.input :password  

      .form-actions
        %button.btn.btn-primary{type: "submit"} Log in

上面的示例生成以下水平视图，其中输入字段位于标签的右侧

*电子邮件[输入]

*密码[输入]

是否可以将它们垂直叠加显示，以便标签位于输入字段上方？如何实现？

*电子邮件
[输入]

*密码

[输入]

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-3 haml

【解决方案1】：

= simple_form_for @session, :as => 'session', :url => session_path do |form|
  %form
    .form-group
      .form
         %div
           = form.label :email
           = form.email_field :email
         %div
           = form.label :password
           = form.password_field :password

【讨论】：

如果字段是 first_name 会发生什么，我可以写 = form.first_name_field :first_name 还是有更好的方法来做到这一点？
@igor，不，您很可能必须写 =form.input_field :first_name 或 =form.input :first_name 或 =form.text_field :first_name（每个都可以）。基本上这一切都在gem的文档中说明。

【解决方案2】：

根据github页面： https://github.com/plataformatec/simple_form

<%= f.input :username, label: 'Your username please' %>

将使标签成为块元素，而不是 inline_label。

或者您可以分别指定标签和输入字段：

<%= f.label :username %>
<br/>
<%= f.input_field :username %>

【讨论】：

【解决方案3】：

试试这个：

  %label Email*
  %div
    = form.input :email

  %label Password*
  %div
    = form.input :password

【讨论】：

它显示标签，但仍然与之前水平显示*Email [input] 下面的问题相同