ブートストラップ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>

It'sブートストラップなしで素晴らしい見て、私は、ブートストラップ・ライブラリーを追加するときに、ナビゲーションバーの要素のテキストが青に変わります。
この問題を解決する方法はありますか？上で見たように、私はさらに青を削除するためにすべてのnavbar要素にstyle="text-decoration: none;"を追加しましたが、それはただ消えません。 お寄せいただきありがとうございます。 - SearchingSolutions

Answer 1

サードパーティのスタイルシートによって適用されるスタイルを操作する場合、！important宣言を使用してこれらのスタイルをオーバーライドする必要があることがあります。たとえば、あなたは試してみてください！ベストプラクティスを使用しない一般的であることが重要、それはブラウザが複数ある場合に適用するためにどのスタイルを決定したことにより、通常の特異ルールを損なうので

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

注意を。ただし、サードパーティのスタイルで使用されている場合は、他の選択肢はありません。代わりに、ブートストラップのCSSが最初に読み込まれるようにチェックして、オーバーライドされるようにしたり、ブートストラップCSSを直接​​変更して色を削除したりします。しかし、ブートストラップのCSSファイルを変更すると、後でそれをアップグレードするのに苦労します。

Answer 2

同じページに2つの異なるライブラリを使用しているのはなぜですか？ クラスの競合は、ほとんどの場合発生することが予定されています。 とにかくこのshdはトリックをします。

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

これはすべてのリンクを正常に保つはずです。