html - 导轨 4 : devise sign up form styling issues

Question

我过去常常按照 Hartl 的教程进行自己的身份验证，但现在我需要更高级的功能，例如密码检索或电子邮件确认，所以我转向了 Devise gem。但是，我在浏览设计已经提供的内容时遇到了一些困难。我正在做一些研究，以便更好地理解它。

与此同时，我在设计登录和注册表单的样式时遇到了问题。对于注册表单，一开始看起来不错，但是一旦我提交了无效的表单，间距就会变得很奇怪。

对于登录表单，我似乎无法弄清楚如何将复选框和标签放在同一行上。我尝试了所有不同种类的 div 和内联 block 。请帮帮我。谢谢!

/devise/registrations/new.html.erb

<div class="center">

    <h2>Sign up</h2>

    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>

        <%= field_set_tag "Name" do %>
            <%= f.text_field :first_name, placeholder: "First Name*", autofocus: true %><br>
            <%= f.text_field :middle_name, placeholder: "Middle Name" %><br>
            <%= f.text_field :last_name, placeholder: "Last Name*" %><br>
        <% end %>

        <%= field_set_tag "Account" do %>
            <%= f.email_field :email, placeholder: "Email*" %><br>
            <%= f.password_field :password, placeholder: "Password*" %><br>
            <%= f.password_field :password_confirmation, placeholder: "Password Confirmation*" %>
        <% end %>
        <div><%= f.submit "Sign up", class: "btn btn-large btn-primary" %></div>
    <% end %>

    Already a user? <%= render "devise/shared/links" %>
</div>

/devise/sessions/new.html.erb

<div class="center">
    <h2>Sign in</h2>

    <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>

        <%= f.email_field :email, placeholder: "Email", autofocus: true %><br>
        <%= f.password_field :password, placeholder: "Password" %><br>

        <div class="row">
            <% if devise_mapping.rememberable? %>
                <div>
                    <div class="remember-me">
                        <div><%= f.label :remember_me %></div>
                        <div><%= f.check_box :remember_me %></div>
                    </div>
                </div>
            <% end -%>
            <%= f.submit "Sign in", class: "btn btn-primary" %>
        </div>
    <% end %>

    <%= render "devise/shared/links" %>
</div>

Answer 1

检查这个stackoverflow链接您将找到登录页面问题的解决方案。 对于注册页面，当输入不正确时，您会遇到间距问题，因为您的表单没有正确显示错误消息，请查看这张您会理解的图片。