Ruby on rails 登录表单未按预期显示

下面是我在views/users/sessions/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"

以下是我在assets/stylesheets/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中导入了这个样式表

在我的英语中，我有：

    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: ""

我现在有：

---

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

表单控件

类直接在

输入

元素上，而不是在它们的容器上。容器应该有一个

表单组的类

这个

.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', ...

---

这是问题的固定部分。请查看对我的问题的编辑。我仍然没有看到占位符文本，并且登录按钮没有正确显示