为什么 Bootstrap 不能正确呈现我的 html？答案

【问题标题】：Why is Bootstrap not rendering my html correctly?为什么 Bootstrap 不能正确呈现我的 html？
【发布时间】：2021-01-29 04:48:15
【问题描述】：

基本问题：我正在尝试在网站顶部创建导航栏。我正在使用 Bootstrap 框架，并且相信我已经正确引入了所有相关库。但是，当我尝试在浏览器中查看我的 html 时，没有一个元素被正确样式化。我究竟做错了什么？我的代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/71aad8ed5d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" />
    <title>Looplab</title>
</head>

<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">LoopLab</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggle-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#explore-head-section" class="nav-link">Explore</a>
                    </li>
                    <li class="nav-item">
                        <a href="#create-head-section" class="nav-link">Create</a>
                    </li>
                    <li class="nav-item">
                        <a href="#share-head-section" class="nav-link">Share</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 
            crossorigin="anonymous"></script>
    <script>
        //Get the current year for the copyright
        $('#year').text(new Date().getFullYear());

    </script>
</body>
</html>

我犯了什么错误？

【问题讨论】：

标签： html css frameworks

【解决方案1】：

在浏览器中打开开发者工具。查看控制台。阅读错误消息。

拒绝应用来自“https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css”的样式，因为它的 MIME 类型（“application/xml”）不是受支持的样式表 MIME类型，并启用严格的 MIME 检查。

然后您可以查看导致错误页面的 URL — https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css。

查找其他 CDN 或下载 CSS 文件并在本地托管。

【讨论】：

非常感谢！我是编码新手，仍在学习绳索。我没有检查开发人员工具。我真的很感激。

【解决方案2】：

我之前遇到过类似的问题，我被告知要做的是将指向 CSS 文件的链接放在指向 Bootstrap 文件的链接上方。否则，Bootstrap 将覆盖 HTML 元素。

【讨论】：

嘿。我尝试将 style.css 链接移到 Bootstrap 链接上方，但看起来没有任何区别。
对不起，我帮不上忙，我在 Bootstrap 方面没有太多经验，只是认为我们可能遇到了同样的问题。
不用担心。上面的答案是正确的：我指向了我的 Bootstrap css 的错误链接，这就是导致问题的原因。
哦，好吧，我很高兴你的问题解决了，感谢昆汀发现这一点。