Bootstrap 3 Konflikte mit W3.CSS Navigationsleiste

Ich habe ein kleines Problem. Während ich mit Bootstrap und W3.CSS experimentiere, entschied ich mich, eine w3-Navbar zu erstellen.Bootstrap 3 Konflikte mit W3.CSS Navigationsleiste

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

Es ist genial Suche ohne Bootstrap, aber wenn ich die Bootstrap-Bibliotheken der Text der Navigationsleiste Elemente wird blau hinzuzufügen.
Gibt es eine Möglichkeit, dieses Problem zu beheben? Wie ich oben gesehen habe, habe ich sogar alle Navbar-Elemente mit style="text-decoration: none;" versehen, um das Blau zu entfernen, aber es wird einfach nicht verschwinden. Vielen Dank im Voraus für alle hilfreichen Antworten, - SearchingSolutions

Quelle

2017-09-01 SearchingSolutions

Wenn Sie mit Stilen arbeiten, die von einem Stylesheet eines Drittanbieters angewendet werden, ist es manchmal notwendig, die! Wichtige Deklaration zu verwenden, um diese Stile zu überschreiben. Zum Beispiel könnten Sie versuchen:

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

Beachten Sie, dass die beste Praxis zu verwenden in der Regel nicht der Fall ist wichtig, weil es die normalen Spezifität Regeln, nach denen untergräbt der Browser in den Fällen anzuwenden, die Stile entscheidet, wo es mehrere sind!. Wenn Sie jedoch von Drittanbietern verwendet wurden, haben Sie möglicherweise keine andere Wahl. Alternativen überprüfen, ob das Bootstrap-CSS FIRST geladen ist, damit es überschrieben wird, oder das Bootstrap-CSS direkt ändern, um die Farbe zu entfernen. Wenn Sie jedoch die CSS-Datei des Bootstrap ändern, wird es später zu einem Problem werden.

Quelle

2017-09-01 18:30:37

Danke! Ich entschied mich für die Lösung, die Sie zuerst erwähnt haben, und fügte den Stil in den Header ein. – SearchingSolutions

Warum verwenden Sie 2 verschiedene Bibliotheken auf der gleichen Seite ?. Ein Klassenkonflikt wird meistens passieren. Anyways this shd tun den Trick.

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

Dies sollte alle Ihre Links normal halten.

Quelle

2017-09-01 17:58:50 reevkandari

Bootstrap 3 Konflikte mit W3.CSS Navigationsleiste

Antwort

Verwandte Themen