Bootstrap 3 与 W3.CSS 导航栏冲突

Question

我有个小问题。在尝试使用 Bootstrap 和 W3.CSS 时，我决定创建一个 w3-navbar。

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="rsc/bootswatch-cosmo.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="w3-top">
  <div class="w3-bar w3-black w3-hide-small w3-hide-medium">
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-vcard fa-fw" ></i> SAMPLE</a>
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-star fa-fw"></i> SAMPLE</a>
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-image fa-fw"></i> SAMPLE</a>
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white w3-right" style="text-decoration: none;"><i class="fa fa-user-circle fa-fw"></i> SAMPLE</a>
  </div>
</div>

没有 bootstrap 看起来很棒，但是当我添加 bootstrap 库时，导航栏元素的文本变成蓝色。
有没有办法解决这个问题？如上所示，我什至将 style="text-decoration: none;" 添加到所有导航栏元素以删除蓝色，但它不会消失。提前感谢所有有用的答案， - 搜索解决方案

Answer 1

为什么要在同一页面上使用 2 个不同的库？。 class 冲突注定会在大多数时候发生。不管怎样，这个 shd 可以解决问题。

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

这应该使您的所有链接保持正常。

Answer 2

在处理由第 3 方样式表应用的样式时，有时需要使用 !important 声明来覆盖这些样式。例如，您可以尝试：

.w3-bar-item, .w3-bar-item:hover
{
    color: #000 !important;
    text-decoration: none !important;
}

请注意，最佳做法通常是不要使用 !important，因为它破坏了浏览器在有多个样式的情况下决定应用哪些样式的正常特异性规则。但是，如果您的第 3 方样式使用它，您可能别无选择。备选方案是检查以确保首先加载 bootstrap 的 CSS，以便它被覆盖，或者直接修改 bootstrap CSS 以删除颜色。但是，如果您更改 bootstrap 的 CSS 文件，以后升级会很痛苦。

Bootstrap 3 与 W3.CSS 导航栏冲突

Bootstrap 3 conflicts with W3.CSS Navigationbar

twitter-bootstrap-3

navbar

nav

conflict

w3.css