Bootstrap登录按钮不是我期望的颜色

Question

在我的app / 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')
    .form-group
      .sr-only
        = f.label t('users.sessions.new.email_address')
      = f.email_field :email, class: 'form-control form-signin email_input', autofocus: true, placeholder: "Email Address", required: ""
      .sr-only
        = f.label t('users.sessions.new.password')
      = f.password_field :password, class: 'form-control form-signin password_input', autofocus: true, placeholder: "Password", required: ""
    - if devise_mapping.rememberable?
      .checkbox
        label
          = f.check_box :remember_me
          = t('users.sessions.new.remember_me')
    .form-group
      = f.submit t('users.mailer.sessions.new.log_in'), class: "form-control 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中，（我将其导入applicatio.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;
}      

我希望登录按钮为蓝色，但它是白色的。知道我做错了什么吗？

Answer 1

提交表单助手上的错误类，你应该这样： f.submit t('users.mailer.sessions.new.log_in'), class: "form-control btn btn-lg btn-primary btn-block" 用空格划分类。

Answer 2

覆盖任何Bootstrap样式要求您将属性标记为重要。例如 -

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

Answer 3

您可以通过以下方式创建自己的按钮（您必须更改颜色十六进制代码）

CSS：

  .btn-example {
  color: #fff;
  background-color: #0000ff;
  border: 0px solid #0000ff !important;
  }

  .btn-example:hover {
  color: #fff;
  background-color: #1a1aff;
  }

你的html按钮类是：

form-control btn btn-example

编辑：因为您使用SASS，它将是：

.btn-example {
color: #fff;
background-color: #0000ff;
border: 0px solid #0000ff !important;
&:hover {
  color: #fff;
  background-color: #1a1aff;
  }
}