在Bootstrap 4中使用bg- class设置自定义导航栏背景颜色

Question

根据Bootstrap 4 migration guide，“导航栏现在需要某种类型的背景声明。请从我们的背景实用程序（.bg-*中进行选择，或者使用上面的light / inverse类设置您自己的mad，自定义。”

我尝试添加类bg-navbar（组成）并设置该类的背景，但是颜色不适用。然后我将其更改为bg-custom并应用了颜色。

为什么bg-custom不能工作，而bg-navbar却不能工作？ bg-custom是官方班吗？如果是这样，我在官方文档中找不到它。我以为它只需要从bg-开始就可以使用，而随后发生的事情（当然，除非您使用的是官方课程之一）就无关紧要。

这不起作用：

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-navbar">

.bg-navbar {
    background: linear-gradient(to bottom, #8259cb 0, #673ab7 100%);
}

但是确实如此（我仅​​将bg-navbar更改为bg-custom）：

   <nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-custom">

    .bg-custom {
        background: linear-gradient(to bottom, #8259cb 0, #673ab7 100%);
    }

更新：问题是编译问题。我之前设置过bg-custom，但是将SCSS更改为bg-navbar后，SCSS编译不正确。

Answer 1

更新1：

使用您的bg-navbar，导航栏仍然可以正常运行：

演示： http://jsfiddle.net/aq9Laaew/285463/

---

原始

我希望您有一个jsfiddle，向我们展示您的所作所为和问题所在。

在这里，我组成了bg-navbar并将其背景设置为红色，并且可以正常工作：

.bg-navbar {
    background: red;
}

演示： http://jsfiddle.net/aq9Laaew/285429/

没有bg-custom类！

bg-前缀没有任何魔术。添加bg-*之所以可行，是因为它们是bootstrap4中预定义的后台类：

https://getbootstrap.com/docs/4.1/utilities/colors/#background-color

结论

看看向我们展示您的工作和代码有多重要？