Question

我有一个Bootstrap按钮，在其中我覆盖了样式表中的样式，因为我想更改边框半径。现在该按钮具有从Bootstrap过渡的效果，如何摆脱它？结果请参见下面的代码段：

.btn {
    border-radius: 0;
    width: 12.313rem;
    padding: 1rem 0.8rem;
    transition: none;
    &-outline-dark {
        color: #000000;
        border-color: #000000;
        transition: none;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<button type="button" class="btn btn-outline-dark">NOW</button>

Answer 1

只需添加！important即可，我还添加了悬停部分，但我不清楚您是否需要此特定内容。

（也要解释：bootstrap有很多内置类，它们使用特定的结构，例如button.btn，因为它更具体，所以它会否决标准.btn类，因此，使用！important可以确保它否决了您的情况。）

.btn {
    border-radius: 0;
    width: 12.313rem;
    padding: 1rem 0.8rem;
    color:#000!important;
    transition: none!important;
    &-outline-dark {
        color: #000000;
        border-color: #000000;
        transition: none!important;

    }
}
.btn:hover {
    background-color:#fff!important;
    color:#000!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<button type="button" class="btn btn-outline-dark">NOW</button>

Answer 2

如果要在将鼠标悬停在按钮上时删除颜色更改，那么您要做的就是利用hover伪类，您可以在w3c网站上找到有关此信息的更多信息。 https://www.w3schools.com/css/css_pseudo_classes.asp

在此代码段中，您可以找到想要达到的目标的解决方案：https://jsfiddle.net/mja1n8ud/

如何从Bootstrap按钮中删除过渡效果？

2 个答案: