时间戳

首页 > 解决方案 > Bootstrap 4 - SASS 扩展按钮在锚标签上不起作用？

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

问题描述

我喜欢 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 类分配给锚标记并将其样式设置为按钮时，为什么这不适用于锚标记？

标签： csssassbootstrap-4

解决方案

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

所有其他btn-*变体都有一个color,background-color和border-color，所以在 CSS 中你可以创建一个btn-defaultwith：

.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)

推荐阅读