Question

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="Emily Thacker">
        <title>[Insert Name of Business Here]</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        <link rel="stylesheet" type="text/css" href="large_css.css">
    </head>
    <body>
    <div class="container-fluid">

    <header class="page-header">
        <h3 class="text-center">[Insert Company Logo here]</h3>
        <div class="btn-group btn-group-justified">
            <a class="btn navigation">Home</a>
            <a class="btn navigation">About</a>
            <div class="btn-group">
                <a class="btn dropdown-toggle navigation" data-toggle="dropdown">
                    Services <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Web</a></li>
                    <li><a href="#">Mobile</a></li>
                    <li><a href="#">App</a></li>
                </ul>
            </div>
            <a class="btn navigation">Contact</a>
        </div>
    </header>


    <section class="">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </section>
    <section>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </section>

    <footer class="modal-footer">
        <li class="list-group-item-heading">list item</li>
        </ul>
        <address>Contact Information</address>
    </footer>
    </div> <!-- closing container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

CSS

body > div > header > div > a.navigation {
    background-color: darkgray;
    color: white;
}

所以我试图改变导航栏上的颜色（使用btn类的锚标签）。我已经尝试增加特异性，我的外部css链接是在bootstrap cdn之后，我已经清除了缓存，我已经使用了！重要。我似乎无法弄清楚我错过了什么。我是全新的bootstrap，我正在试图弄清楚如何将它合并到我的网站中。

Answer 1

您忘记关闭包含bootstrap的标记：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

在最后添加最后一个>。

Answer 2

开始使用IDE＆amp; IDE的语法突出显示功能。

这不是您问题的直接答案，但它将在未来节省大量开发时间，以避免出现这类问题。

我希望你可以花费至少30分钟来尝试解决这个问题并将其发布。但是当我查看你的代码时，我立即发现了这个问题。这是因为SO代码块中的语法突出显示功能。

在我职业生涯的最初阶段，我多次遇到过这类问题。我花了很多时间试图解决这个问题。后来发现这只是一个拼写错误或语法错误。然后我开始使用IDE，它现在为我节省了很多时间。

始终使用IDE并尝试使用IDE的功能。以下是使用IDE的一些优点。 https://stackoverflow.com/a/208221/4874281，Why is debugging better in an IDE?

以下是您可以选择的IDE列表，https://www.g2crowd.com/categories/integrated-development-environment-ide

外部CSS文件不能与Bootstrap CSS一起使用

2 个答案: