|助推器 5|边框颜色不会改变

时间:2021-05-03 08:17:51

标签: border bootstrap-5

大家好,

我设置了引导程序规则来更改基本颜色(primray、secondary 等...)

除了边框颜色之外的所有内容(按钮、悬停等、表格等)都可以更改......我不明白为什么。

这是我的部分代码。

我在 app.css 中的数组

@import "~bootstrap/scss/bootstrap";

$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;

$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $secondary,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
);
@import "~bootstrap/scss/bootstrap";

以及边框使用的示例。我也试过全边框,但它也不起作用。我改变的任何颜色都会被渲染。

<li class="nav-item border-bottom border-3 border-primary mb-2">
    <a class="nav-link" href="#">
        <span data-feather="bar-chart-2">Rapports</span>         
    </a>
</li>

非常感谢您的帮助:)

1 个答案:

答案 0 :(得分:1)

您不想在更改之前@import 所有引导程序。相反,@import 所需的 SASS 源文件,然后设置更改。

@import "~bootstrap/scss/bootstrap/functions";
@import "~bootstrap/scss/bootstrap/variables";

/* Variable overrides */
$primary : #009f93;
$secondary : #ff9914;
$success : #69dc9e;
$info : #90c290;
$light : #e4f0f5;
$dark : #0b2027;

$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $secondary,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
);

@import "~bootstrap/scss/bootstrap/";

Demo