Bootstrap 3 与 W3.CSS 导航栏冲突答案

【问题标题】：Bootstrap 3 conflicts with W3.CSS NavigationbarBootstrap 3 与 W3.CSS 导航栏冲突
【发布时间】：2017-09-01 17:51:34
【问题描述】：

我有一个小问题。在尝试使用 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>

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

【问题讨论】：

标签： twitter-bootstrap-3 navbar nav conflict w3.css

【解决方案1】：

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

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

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

【讨论】：

谢谢！我选择使用您首先提到的解决方案，将样式添加到标题中。

【解决方案2】：

为什么在同一页面上使用 2 个不同的库？大多数时候，阶级冲突注定会发生。无论如何，这个 shd 可以解决问题。

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

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

【讨论】：