Ändern der Farbe der links in meiner bootstrap navbar

Habe ich diesen code für meine Navigation:

 <nav class="navbar navbar-fixed-top" id="my-navbar">
   <div class="container">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
           </button>
           <a href="" class="navbar-brand"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a>
       </div><!--End navbar-header-->  
       <div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
           <ul class="nav navbar-nav">
               <li><a href="#portfolio">Feedback</a>
               <li><a href="#features">Gallery</a>
               <li><a href="#gallery">Features</a>
               <li><a href="#feedback">Faq</a>
               <li><a href="#contact">ContactUs</a>
           </ul>
       </div>
   </div><!-- End container -->

Und ich will die Verknüpfungen ändern Farbe, ich habe versucht, dies in meinem css:

.navbar {
 background: rgba(0,0,0,0.4);
    font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black;

}

Versuchte ich auch hinzufügen !wichtig, aber ich kann es nicht.

InformationsquelleAutor Pablo | 2015-06-04

0

Müssen Sie Ihre css-spezifische, Farbe angewendet von bootstrap ist auf a. So überschreiben, wird die Regel:
```
.navbar-nav > li >a{
  color:black;
}
```
überschreiben die default-Regel angewandt, die durch bootstrap-Anker:
```
a {
  color: #337ab7;
  text-decoration: none;
}
```
Stift

Diese stellt sicher, dass diese Farbe ist nur auf dem Anker-ist direkte Nachfahrin von li ist direkte Nachfahrin von .navbar-nav. Im Hinblick auf die Anwendung weltweit (alle hyperlinks in Ihre Webseite), könnte Man auch überschreiben, indem Sie tun a{color:black}. Sie müssen auch sicherstellen, dass Sie das laden der css nach der bootstrap-so dass, dass dauert, die Vorrang vor bootstrap. Vermeiden Sie die Verwendung !important es wird zerstört alle cascadeability der css und verhindert, dass das überschreiben später.
- Also, ich brauche, um einen vollständigen Pfad zu dem Artikel möchte ich überschreiben, das ist die Erklärung?
- Nein, Sie wirklich nicht. Aber die Angabe eines vollständigen Pfad stellt sicher, dass diese Farbe angewendet wurde nur zum Anker der direkte Nachkomme des li unter der nav-bar-nav. Könnte man auch überschreiben, indem Sie tun a{color:black} - vorausgesetzt, Sie laden Ihre css nach der bootstrap.
InformationsquelleAutor PSL

<nav class="navbar navbar-fixed-top" id="my-navbar">
   <div class="container">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
           </button>
           <a href="" class="navbar-brand"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a>
       </div><!--End navbar-header-->  
       <div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
           <ul class="nav navbar-nav" id="links">
               <li><a href="#portfolio">Feedback</a>
               <li><a href="#features">Gallery</a>
               <li><a href="#gallery">Features</a>
               <li><a href="#feedback">Faq</a>
               <li><a href="#contact">ContactUs</a>
           </ul>
       </div>
   </div><!-- End container -->

CSS:

#links a{
     color:#000000;
     font-size:18px;
}

Habe ich nur noch id="links" ul, und dann auf die der ein in dass mit CSS

InformationsquelleAutor solid_luffy

Hier ist eine mögliche Lösung" https://jsfiddle.net/99x50s2s/52/

CSS:

.nav>li>a{
 background: rgba(0,0,0,0.4);
    font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black; 
}

InformationsquelleAutor Vimalan Jaya Ganesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.