登录表单不显示如预期

下面是我在视图/用户/会话/ new.html.slim登录表单不显示如预期

.container 
    = form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "form-signin"}) do |f| 
    h2.form-signin-heading 
     = t('users.mailer.registrations.sessions.new.please_sign_in') 
    .sr-only 
     = f.label t('users.sessions.new.email_address') 
     br/ 
    .form-control.email_input 
     = f.email_field :email, autofocus: true, placeholder: "#{t('users.sessions.new.email_address')}", required: "" 
     br/ 
    .sr-only 
     = f.label t('users.sessions.new.password') 
     br/ 
    .form-control.password_input 
     = f.password_field :password, autofocus: true, placeholder: "#{t('users.sessions.new.password')}", required: "" 
     br/ 
    - if devise_mapping.rememberable? 
     .checkbox 
     label 
      = f.check_box :remember_me 
      = t('users.sessions.new.remember_me') 
    = f.submit t('users.mailer.sessions.new.log_in'), class: "button.btn.btn-lg.btn-primary.btn-block" 
    .form-group 
     .col-md-offset-4.col-md-8 
     = render "devise/shared/links"

下面是我在资产/样式表/ signin.css.scss：

.form-signin { 
    max-width: 330px; 
    padding: 15px; 
    margin: 0 auto; 
} 
.form-signin body { 
    padding-top: 40px; 
    padding-bottom: 40px; 
    background-color: #ee 
} 
.form-signin .form-signin-heading, 
.form-signin .checkbox { 
    text-align: center; 
    margin-bottom: 10px; 
} 
.form-signin .checkbox { 
    font-weight: normal; 
} 
.form-signin .form-control { 
    position: relative; 
    height: auto; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 10px; 
    font-size: 16px; 
} 
.form-signin .form-control:focus { 
    z-index: 2; 
} 
.form-signin .email_input { 
    margin-bottom: -1px; 
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
} 
.form-signin .password_input { 
    margin-bottom: 10px; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
}

，我已经导入这个样式表在我application.css.scss

在我en.yml，我有：

users: 
     sessions: 
     new: 
      please_sign_in: "Please Sign In" 
      password: "Password" 
      log_in: "Log In" 
      email_address: "Email Address" 
      remember_me: "Remember Me"

这是我看到：

这里是什么，我期待看到：

我是新来SCSS。任何想法可以帮助我诊断问题？

我提出了以下变化：

.sr-only 
    = f.label t('users.sessions.new.email_address') 
.form-group 
    = f.email_field :email, class: 'form-control form-signin email_input', autofocus: true, placeholder: "#{t('users.sessions.new.email_address')}", required: "" 
.sr-only 
    = f.label t('users.sessions.new.password') 
.form-group 
    = f.password_field :password, class: 'form-control form-signin password_input', autofocus: true, placeholder: "#{t('users.sessions.new.password')}", required: ""

，我现在有：

但占位符文本没有显示，登录按钮是不正确的

来源

2017-10-13 EastsideDeveloper

form-control类直接在input元素上，不在其容器上。容器应该有一类form-group。

这...

.form-control.email_input 
    = f.email_field :email, autofocus: true, placeholder: "#{t('users.sessions.new.email_address')}", required: ""

...应该是沿着线的东西：

.form-group 
    = f.email_field, class: 'form-control', ...

来源

2017-10-13 22:02:05 meagar

这类问题的固定部分。请参阅编辑我的问题。我仍然没有看到占位符文本，登录按钮没有正确显示 – EastsideDeveloper

登录表单不显示如预期

回答

相关问题