引导程序3与W3.CSS导航栏冲突

我遇到了一些问题。尽管尝试使用Bootstrap和W3.CSS，我决定创建一个w3导航栏。引导程序3与W3.CSS导航栏冲突

<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>

It's寻找真棒不引导，但是当我添加引导程序库中的导航栏元素的文本变成蓝色。
有没有办法解决这个问题？如上所示，我甚至将style="text-decoration: none;"添加到所有导航栏元素中以移除蓝色，但它不会消失。在此先感谢所有有帮助的答案， - SearchingSolutions

来源

2017-09-01 SearchingSolutions

当处理由第三方样式表应用的样式时，有时需要使用！重要声明来覆盖这些样式。举例来说，你可以尝试：

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

注意，最好的做法一般不使用很重要，因为它破坏了通过浏览器决定哪些款式在有多个案件适用普通特异性规则！但是，如果你的第三方风格使用它，你可能没有其他选择。替代方案正在检查以确保引导程序的CSS首先被加载，以便它被覆盖，或者直接修改引导CSS来移除颜色。但是，如果您更改bootstrap的CSS文件，稍后会使其升级。

来源

2017-09-01 18:30:37

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

为什么你在同一页上使用2个不同的库？阶级冲突注定要发生在大多数时间。反正这个shd做的伎俩。

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

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

来源

2017-09-01 17:58:50 reevkandari

引导程序3与W3.CSS导航栏冲突

回答

相关问题