Bootstrap 適用於 localhost 但不適用於 Github 頁面

Question

我正在使用 Bootstrap 4、animate.css、typed.js 和自定義 css 創建一個投資組合網站。

在 VS Code 中使用 localhost 時一切正常，但是在 Github 頁面中查看它時，所有 styles 和 JS 都不起作用。 我確信我在 head 標簽中的鏈接是正確的，但其他意見會很棒。 請看下面的代碼。

<html lang="en">
<head>
    <!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,400,700,900|Titillium:100,200,400,700,900+Web&display=swap"
        rel="stylesheet">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- JS -->
    <script src="/js/typed.js"></script>
    <title>Ryan Mottram Online Portfolio</title>
</head>

<body>

    <!-- NAV BAR START -->
    <nav class="navbar navbar-expand-lg navbar-light sticky-top animated slideInDown">
        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="me.html">Ryan Mottram</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Projects
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="projects.html">View All</a>
                        <a class="dropdown-item" href="wally-project.html">Where's Wally?</a>
                        <a class="dropdown-item" href="haskell-te-project.html">Haskell Text Editor</a>
                        <a class="dropdown-item" href="gtb-project.html">Going to Boston</a>
                        <a class="dropdown-item" href="pathfinder-project.html">Path Finder</a>
                        <a class="dropdown-item" href="webauth-project.html">Web Authoring Assessment</a>
                        <a class="dropdown-item" href="cipher-project.html">Caesar Cipher</a>
                        <a class="dropdown-item" href="algorithms-project.html">Searching and Sorting Algorithms</a>
                        <a class="dropdown-item" href="shufflegame-project.html">Shuffle Game</a>
                        <a class="dropdown-item" href="compsci-project.html">Computer Science Project</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
<!-- NAV BAR END -->

    <div class="jumbotron jumbotron-fluid animated">
        <div id="container">
            <h2 class="typing-anim"><span class="type"></span></h2>
        </div>
    </div>
    <br><br>

    <!-- <div id="particles-js"> -->
            <div class="card">
                    <img src="/assets/me_hs.jpg" class="rounded-circle img-fluid animated fadeIn">
                    <div class="card-body"> <br>
                        <h1 class="animated slideInLeft">Who Am I?</h1> <br>
                        <p class="card-text animated slideInRight">An undergraduate originally from Lowestoft attending the University of Lincoln, UK studying
                            Computer Science. Giving you an insight to what I have done/doing/can do and would like to do for myself or even you?
                            <br> <br> So what you waiting for? Take a look at what I have done or read more about me and make your own opinion.</p>
                    </div>
                </div>
    <!-- </div> -->

    <script src="/js/particles.js"></script>
    <script src="/js/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="/js/script.js"></script>
</body>

</html>

Answer 1

您的路徑似乎有問題。

所以這就是 GitHub 試圖得到的：

https://rmottram.github.io/js/script.js

你想要的可能是：

https://rmottram.github.io/Portfolio/js/script.js

所以我建議改變你的路徑

/js/typed.js

至

./js/typed.js

Answer 2

謝謝你們的意見，我發現我需要按照 Damien 的建議在路徑前放置“./”，再次感謝你們！

Bootstrap 適用於 localhost 但不適用於 Github 頁面

問題描述

2 個解決方案

解決方案1
2 2020-05-12 14:49:40

解決方案2
1 2020-05-12 14:57:34

Bootstrap 適用於 localhost 但不適用於 Github 頁面

問題描述

2 個解決方案

解決方案1 2 2020-05-12 14:49:40

解決方案2 1 2020-05-12 14:57:34

解決方案1
2 2020-05-12 14:49:40

解決方案2
1 2020-05-12 14:57:34