Warum verwendet die Navbar-benutzerdefinierte Stile Bootstrap nicht

Ok, also versuche ich eine grundlegende bootstrap navbar mit einer benutzerdefinierten CSS-Datei anzupassen, die in der HTML-Datei nach dem Bootstrap cdn enthalten ist. Andere Stile, die dort angewendet werden, funktionieren gut, aber ich kann nicht herausfinden, warum sich die Hintergrundfarbe der Navigationsleiste nicht ändert. Hier ist mein Code. Danke im Voraus.Warum verwendet die Navbar-benutzerdefinierte Stile Bootstrap nicht

.navbar-custom{ 
 
    background-color: #0e3572; 
 
} 
 
.jumbotron{ 
 
    background-color: #15438e; 
 
    text-align: center; 
 
} 
 
.jumbotron p{ 
 
    color:white; 
 
    font-family: "Bookman Old Style"; 
 
} 
 
.jumbotron h2{ 
 
    color:white; 
 
    font-family: "Bookman Old Style"; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta lang="en"> 
 
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>PixelCoward Studios</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- custom css --> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
    <!-- JQuery --> 
 
    <script 
 
      src="https://code.jquery.com/jquery-3.1.1.js" 
 
      integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
 
      crossorigin="anonymous"></script> 
 
    <!-- JQuery UI --> 
 
    <script 
 
      src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" 
 
      integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" 
 
      crossorigin="anonymous"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 

 
     <nav class = "navbar navbar-default navbar-custom navbar-fixed-top" role = "navigation"> 
 
      <div class="container-fluid"> 
 
       <div class = "navbar-header"> 
 
        <button type = "button" class = "navbar-toggle" 
 
          data-toggle = "collapse" data-target = "#example-navbar-collapse"> 
 
         <span class = "sr-only">Toggle navigation</span> 
 
         <span class = "icon-bar"></span> 
 
         <span class = "icon-bar"></span> 
 
         <span class = "icon-bar"></span> 
 
        </button> 
 

 
        <a class = "navbar-brand" href = "#">PixelCoward Studios</a> 
 
       </div> 
 

 
       <div class = "collapse navbar-collapse" id = "example-navbar-collapse"> 
 

 
        <ul class = "nav navbar-nav navbar-right"> 
 
         <li class = "active"><a href = "#">About Us</a></li> 
 
         <li><a href = "#">Our Work</a></li> 
 

 
         <li class = "dropdown"> 
 
          <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> 
 
           Contact 
 
           <b class = "caret"></b> 
 
          </a> 
 

 
          <ul class = "dropdown-menu"> 
 
           <li><a href = "#">Team</a></li> 
 
           <li><a href = "#">Credits</a></li> 
 
           <li class = "divider"></li> 
 
           <li><a href = "#">Email Us</a></li> 
 
          </ul> 
 

 
         </li> 
 

 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 
    </header> 
 

 
    <section> 
 
     <div class="jumbotron"> 
 
      <h2>Hello there!</h2> 
 
      <p>We are an IT company specialized in developing mobile apps and websites</p> 
 
     </div> 
 
    </section> 
 

 
</body> 
 

 
</html>

Quelle

2017-03-07 Ghiban Costin

Welche Stile werden nicht angewendet? Die Reihenfolge, in der Sie sie auflisten, und die Vorrangregeln sind hier wichtig. – DavidG

Die Hintergrundfarbe ändert sich ok: http://www.codeply.com/go/q7r8svZbHs – ZimSystem

@ZimSystem Es ändert sich auch in meinem Browser, aber nicht in Stack-Overflow-Code-Snippet arbeiten ... nur neugierig..Kannst du eine Erklärung vorschlagen dafür? – neophyte

hinzufügen alle benutzerdefinierten CSS zu einer Seite, und nennen Sie es custom.css nun unter der Bootstrap CSS-Linie in der Kopfzeile eine neue Zeile wie diese

**<!-- Bootstrap Core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles --> 
    <link href="css/custom.css" rel="stylesheet">**

hinzufügen

Quelle

2017-03-07 18:16:00 mlegg

Warum verwendet die Navbar-benutzerdefinierte Stile Bootstrap nicht

Antwort

Verwandte Themen