使用Bootstrap在VUE路由中加下划线的字体

Question

在我的Vuetify VUE项目中，我将使用Bootstrap库。

事实证明，当我导入Bootstrap库、文本字体甚至图标时，路由都有下划线。当我只与Vuetify合作时，我没有这个问题。

import "bootstrap/dist/css/bootstrap.css";

当我注释掉导入库的项目中的行时，下划线就会消失。

我如何解决这个问题而不必在项目中的每条路线中都放置类？

"vue": "2.6.14",
"bootstrap": "4.6.1",
"bootstrap-vue": "2.21.2",
"vuetify": "2.6.0",

Answer 1

解决了我的问题。默认情况下，引导会在链接路由下加下划线。因此，我分析了导入VUE项目的文件，发现了一些设置，当鼠标指针落在链接上时，这些设置会在链接下面加下划线。

我分析的文件是：

"bootstrap-vue/dist/bootstrap-vue.css";

因此，我创建了一个文件，用于放置我想要更改BootstrapVue默认设置的CSS配置。

//bootstrapGlobal.css
a:not(.btn) {
text-decoration: none;
}

我只需要更改这个配置，但如果我需要更改其他配置，我会将其插入这个全局文件中。

这个提示是为那些需要它的人。

圆满结束！