Bootstrap 4-SASS扩展按钮在锚标签上不起作用？

Question

我喜欢Bootstrap 4之前版本中默认按钮的样式。为了尝试制作自己的按钮，我想到了以下SASS：

.btn-default {
    @extend .btn;
    border-color: #A5A5A5;
}

.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
    color: #808080;
}

如果我使用了<button>标签，这可以按预期工作，但是如果我使用了<a>标签，则不能按预期工作。为什么这两个都不起作用？

<a href="#" class="btn btn-default">
    Test Anchor
</a>

<button type="submit" class="btn btn-default">
    Test Button
</button>

当您通常可以将.btn类分配给锚标记并且将其样式化为按钮时，为什么在锚标记上不起作用？

Answer 1

我认为您不需要@extend .btn，因为您已经在使用.btn。

所有其他btn-*变体都有color，background-color和border-color，因此在CSS中，您可以使用以下方法创建btn-default：

.btn-default{
   color:#333;
   background-color:#bbb;
   border-color:#a5a5a5
 }
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
    color: #808080;
}

Bootstrap SASS方法是使用按钮变体@mixin ...

.btn-default {
    @include button-variant(#bbb, #a5a5a5, #bbb, darken(#bbb, 10%), darken(#bbb, 10%), darken(#bbb, 12.5%))
}

演示：https://www.codeply.com/go/CWJidmeI1D

以下是按钮变型mixin的参数：

button-variant($background, $border, $hover-background, $hover-border, $active-background, $active-border)

Answer 2

<a>标签没有按钮的行为。使其尝试以下代码

a.btn{
 -webkit-appearance: button;
 -moz-appearance: button;
 appearance: button;

 text-decoration: none;
 color: initial;
}