css - Bootstrap SASS 自定义按钮未显示在表格或卡片中？

Question

我创建了以下 SCSS 来制作 Boostrap 3 中 btn-default 的外观。如果我直接在页面上使用按钮，它会按预期显示。但是，如果我在表格或卡片内部使用，那么我所看到的只是文本边框。背景是透明的，字体颜色像超链接一样是蓝色而不是黑色。

这是我添加的所有内容。

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

我就是这样用的。

<button type="button" id="btnReset" class="btn-default btn-sm">
    <span class="fas fa-sync-alt" aria-hidden="true"></span> Reset
</button>

更新 - 修复

根据下面的建议，这就是我想出的。它不完全是 BS3 的颜色，但我喜欢它比 BS3 使用的颜色稍深。

.btn-default {
    $color-bg: #DCDCDC;
    $color-border: #BCBCBC;
    $hover-bg: #BFBFBF;
    $active-bg: #BFBFBF;

    @include button-variant( $color-bg, $color-border, $hover-bg, darken($color-border, 10%), $active-bg, darken($color-border, 12.5%) );
}

Answer 1

要创建新的按钮样式，您必须使用 Bootstrap 4 提供的 button-variant mixin。

例如；这就是我创建一个白色按钮的方法。

.btn-white {
    $color-bg: #ffffff;
    $color-border: $border-color;
    $hover-bg: #84898F;
    $active-bg: #84898F;

    @include button-variant(
            $color-bg,
            $color-border,
            $hover-bg,
            darken($color-border, 10%),
            $active-bg,
            darken($color-border, 12.5%)
    );
}

这将只对按钮类应用颜色样式，但它仍然看起来像 Bootstrap 4 按钮。

Bootstrap 4 中没有任何东西可以帮助您将特定按钮样式的外观恢复到 Bootstrap 3。您只需要手动将自己想要的样式应用到类中即可。