vue.js - 更改 Bootstrap Vue 折叠导航栏图标的颜色

Question

我已将 Bootstrap Vue 集成到我的项目中，并且很难自定义它。具体来说，我说的是Navbar 组件。

我已阅读文档并看到我可以对导航栏应用一个变体来定义整个导航栏的颜色。

问题是，我没有提供导航栏的变体（也不想），当它折叠时，折叠的菜单图标（汉堡菜单图标）是黑色的，并且由于我网站的背景颜色不可见。

我检查了网站的 DOM 并使用了以下 CSS 规则和选择器：

• .navbar-toggle

• .navbar-toggler

• .navbar-toggler-icon

对于他们每个人，我都尝试应用规则：

color: white !important;

但这没有结果。

我在网上和 SO 中查看过，但没有发现任何可以解决这种情况的东西。

导航栏打开：

导航栏折叠：

显然，我可以更改网站的背景颜色，但我不想这样做，因为我不想仅仅因为一个小问题而改变网站的外观和感觉（我希望能够知道如何克服这一点）。

链接到代码

标签： vue.jsnavbarbootstrap-vuehamburger-menu

Answer 1

查看您的代码 -.navbar-toggle并且.navbar-toggler只是普通div的，所以colorprop 只会影响文本颜色。

如果您尝试更改图标颜色 - 它是内联背景 svg。你只能用你自己的文件覆盖它。