为什么导航栏自定义样式不适用引导程序

好的，所以我试图使用自定义CSS文件自定义基本引导程序导航栏，该文件包含在bootstrap cdn后面的html文件中。在那里应用的其他风格工作得很好，但我无法弄清楚为什么导航栏背景颜色没有改变。这是我的代码。提前致谢。为什么导航栏自定义样式不适用引导程序

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

来源

2017-03-07 Ghiban Costin

哪些款式不适用？您列出它们的顺序和优先顺序在此处非常重要。 – DavidG

背景颜色正在改变：http://www.codeply.com/go/q7r8svZbHs – ZimSystem

@ZimSystem它也改变了我的浏览器，但不工作在堆栈溢出代码片段..只是好奇......你可以提出一个解释为了那个原因？ – neophyte

所有的自定义CSS添加到页面，并将其命名custom.css 现在头中的引导CSS线下添加一个新行这样

**<!-- 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">**

来源

2017-03-07 18:16:00 mlegg

为什么导航栏自定义样式不适用引导程序

回答

相关问题