为什么导航栏自定义样式不应用引导答案

【问题标题】：Why does the navbar-custom styles not apply bootstrap为什么导航栏自定义样式不应用引导
【发布时间】：2017-03-07 16:58:04
【问题描述】：

好的，所以我正在尝试使用自定义 css 文件自定义基本引导导航栏，该文件包含在引导 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>

【问题讨论】：

哪些样式不适用？您列出它们的顺序和优先规则在这里很重要。
背景颜色变化正常：codeply.com/go/q7r8svZbHs
@ZimSystem 它也在我的浏览器中发生变化，但在堆栈溢出代码 sn-p 中不起作用..只是好奇..您能对此提出解释吗？
那是古玩......在我的浏览器（chrome）中，导航栏的背景保持默认，但在链接@ZimSystem 中提供了导航栏自定义样式
几乎可以肯定是因为排序。您需要在 Bootstrap CSS 之后指定您的样式。

标签： css twitter-bootstrap navigationbar

【解决方案1】：

将所有自定义 CSS 添加到页面并将其命名为 custom.css 现在在标题中的 Bootstrap 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">**

【讨论】：