如何在bootstrap 4

Question

我有这个输出

按钮未点击

按钮悬停

按钮单击（这是我的问题）

如何更改该活动按钮颜色？

我有这段代码：

/**BTN Primary**/
.btn{
    border-radius:1px;
}

.btn-primary{
    background-color: rgb(114, 96, 153);
    border-color:rgb(114, 96, 153);
}

.btn-primary:hover{
    background-color: rgb(94, 79, 126);
    border-color:rgb(94, 79, 126);
}

.btn-primary:focus{
    background-color: rgb(94, 79, 126);
    border-color:rgb(94, 79, 126);
}

.btn-primary:active{
    background-color: rgb(94, 79, 126);
    border-color:rgb(94, 79, 126);
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.075) inset, 0 0 8px rgba(114, 96, 153, 0.6);
    outline: 0 none;
}
/**BTN Primary**/

Answer 1

你必须覆盖.btn-primary:not(:disabled):not(.disabled):active{

检查元素，然后在开发工具中点击toggle pseudo class，然后选中active以查看按钮处于活动状态时应用的规则，您将查看规则是否被覆盖或你需要覆盖什么。

无法让它在代码片段中运行，这是一个小提琴：https://jsfiddle.net/takius/h9sj80kx/14/

编辑：（根据评论）

更改蓝色阴影，它位于：.btn-primary:not(:disabled):not(.disabled):focus{

更新小提琴：https://jsfiddle.net/takius/h9sj80kx/32/

Answer 2

如果您使用webpack或类似的编译器从引导源代码中获取css

您可以在my.scss文件中这样做

$blue:    rgb(114, 96, 153);
@import "~bootstrap/scss/_variables";
@import '~bootstrap/scss/bootstrap';