VUE 路由中带下划线的字体 Bootstrap

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

解决了我的问题。 Bootstrap 默认在 link 路由下划线。所以我分析了导入到VUE项目中的文件，发现有几个设置在鼠标指针落在它们上时下划线links。

我分析的文件是：

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

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

//bootstrapGlobal.css

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

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

此提示适用于需要的人。

圆满结束！

Font underlined in VUE routes with Bootstrap