bootstrap 4单击时删除下划线答案

【问题标题】：bootstrap 4 remove underline when clickedbootstrap 4单击时删除下划线
【发布时间】：2019-08-18 13:35:27
【问题描述】：

单击导航栏中的菜单时，我在删除出现的下划线时遇到问题，这是我使用的代码。但它不起作用！

a.nav-link, a.nav-link:hover, a.nav-link:active, a.nav-link:visited, a.nav-link:focus {
    text-decoration:none;
}

还是没有运气。

我正在使用 bootstrap 4 alpha

【问题讨论】：

发布您的 HTML。

标签： html css twitter-bootstrap

【解决方案1】：

你可以删除所有标签中的下划线

 a, a:hover,a:visited, a:focus {
    text-decoration:none;
}

【讨论】：

【解决方案2】：

在 bootstrap 4 中，您可以简单地添加

.text-decoration-none

上课，你的工作就完成了。

【讨论】：

【解决方案3】：

你是在引导库之后加载你的 css 吗？例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">

在这种情况下 style.css 上的 css 将优于 bootstrap css

如果对你有帮助，请告诉我！

【讨论】：

【解决方案4】：

Bootstrap 4 将Sass 用于变量和mixin，覆盖链接默认行为的最简单方法是定义一个自定义类，如下所示：

.non-underline-link{
   text-decoration: none !important;
}

你的 html 文件：

<a href='/' class='non-underline-link'>
   <p>Hello!</p>
</a>

然后在您的项目中重新编译它。欲了解更多信息，请转到HERE

【讨论】：