html - 更改 Bootstrap 按钮的颜色

Question

这是一个愚蠢的问题，因为我觉得我应该知道答案并且认为我的代码可以完成这项工作。

但我正在使用 Bootstrap ，并且我正在尝试将 btn btn-primary 类从默认的蓝色更改为其他颜色。

这是我的 html:

<input type="text" class="form-control" placeholder="Search by user name, member type, genre...">
                         <span class="input-group-btn">
                             <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
                         </span>

还有我的 CSS:

.btn btn-primary:hover,
.btn btn-primary:focus,
.btn btn-primary:active,
.btn btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}

但它仍然看起来像这样:

Answer 1

确保您的覆盖在默认 Bootstrap 之后加载，或者如果您使用 npm 并自己编译，请确保您的变量覆盖放置在 Bootstrap 默认值之后

在 bootstrap.css (BS4) 中 btn-primary 类定义如下:(请注意，没有必要在这些类前面加上 .btn.btn-primary，只需 .btn-primary...之前的答案实际上并不正确，但由于特殊性而有效。: -)

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: #0069d9;
  background-image: none;
  border-color: #0062cc;
}

如果您在主题中填写所有这些内容，请确保您的主题更改在 Bootstrap 完成后加载。