时间戳

首页 > 解决方案 > 为什么 Bootstrap 不能正确呈现我的 html？

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

问题描述

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

我犯了什么错误？

标签： htmlcssframeworks

解决方案

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

拒绝应用来自“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 文件并在本地托管。

推荐阅读