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

Posted 2023-02-16

【中文标题】使用 Bootstrap 在 VUE 路由中加下划线的字体

【英文标题】：Font underlined in VUE routes with Bootstrap

【发布时间】：2022-01-14 08:34:23

【问题描述】：

在我使用 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",

【参考方案1】：

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

我分析的文件是：

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

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

//bootstrapGlobal.css

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

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

这个技巧是为那些需要它的人准备的。

快乐的结局！