为什么引导程序不能正确呈现我的html？_Html_Css_Frameworks

为什么引导程序不能正确呈现我的html？

html css frameworks

为什么引导程序不能正确呈现我的html？,html,css,frameworks,Html,Css,Frameworks,基本问题：我正在尝试在网站顶部创建导航栏。我正在使用Bootstrap框架，并且相信我已经正确地引入了所有相关的库。但是，当我尝试在浏览器中查看html时，没有一个元素被正确地样式化。我做错了什么？我的代码如下： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="

基本问题：我正在尝试在网站顶部创建导航栏。我正在使用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>


环路实验室










//获取版权的当前年份
$（“#年”）.text（新日期（）.getFullYear（））；

我犯了什么错误？

我以前也遇到过类似的问题，我被告知要做的是将指向CSS文件的链接置于指向引导文件的链接之上。否则，引导将覆盖HTML元素。

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

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

因此，您可以检查URL，这将导致一个错误页面

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

Hey。我尝试将style.css链接移到引导链接上方，但看起来没有任何区别。很抱歉，我帮不上忙，我在引导方面没有太多经验，只是认为我们可能遇到了相同的问题。不用担心。上面的答案是正确的：我的引导css指向了错误的链接，这就是问题的原因。哦，好吧，我很高兴你的问题解决了，昆汀发现了这一点。非常感谢！我不熟悉编码，但仍在学习诀窍。我没有想到要检查开发工具。我真的很感激。