Question

= 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

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

*电子邮件[输入]

*密码[输入]

是否可以将它们垂直显示在彼此之上，因此标签位于输入字段之上？如何实现？

*电子邮件
[输入]

*密码

[输入]

Answer 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

Answer 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 %>

Answer 3

试试这个：

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

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

如何垂直显示simple_form

3 个答案: