引导程序和样式表未在本地加载答案

【问题标题】：Bootstrap and Stylesheet not loading Locally引导程序和样式表未在本地加载
【发布时间】：2020-09-05 03:42:41
【问题描述】：

我有以下head 部分，

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

当我尝试在浏览器中进行本地测试时，我的样式（来自Bootstrap 和我的本地样式表）似乎没有加载。这发生在Google Chrome 和Firefox 中。

但是，当我推送到我的 Github Pages 存储库时，样式会被应用并正常工作。

旁注：一些对齐样式似乎适用，但没有填充、颜色等。

【问题讨论】：

清除缓存的浏览器数据，在做web开发的时候，我经常需要这样做才能看到我所做的任何改变。
@Jordan.J.D 我刚才也试过在Edge 和IE 中运行它，这两个我都没有运行过，同样的问题也适用。
您是否在控制台中看到任何错误？
@yBrodsky sigh 是的，我愚蠢的自己不想看。问题是GET file:///E:/assets/stylesheets/stylesheet.css net::ERR_FILE_NOT_FOUND 表明它似乎不喜欢我以root 身份使用/？就像assets/...

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

尝试仅在 <head> 标签内加载您的 CSS：

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

之后，转到<body>标签的最后，将其他依赖项粘贴到左边：

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

它将改善您的系统，因为从 CSS 开始，我在加载您的页面时不会停止阅读任何脚本。

编辑：

如果还是不行，请尝试删除：

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

可能是外部链接的问题。

【讨论】：

我修好了。似乎它不喜欢我的样式表位置之前的/，例如/assets/stylesheets/stylesheet.css。删除它并让assets/... 工作。不应该像/ 表示root 那样工作吗？另外，知道为什么在通过 Github 加载时渲染得很好吗？
对。你用什么来本地主机？我使用 nodejs 并且无法模拟问题。一切正常。
什么意思？我只是将 HTML/CSS 与 Bootstrap 一起使用，并通过浏览器在我克隆的 Github 存储库中运行我的本地 index.html 副本。
你可以像@ryderd所说的那样使用。我通常在本地使用 ./**assets 但它应该在没有 **/ 的情况下工作。
@ryderd 如果我只是在浏览器上打开，它就不起作用。我使用 nodejs 进行本地主机并正常工作。

【解决方案2】：

这部分代码好像有问题：

<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">

您在本地使用的文件结构似乎与您在远程仓库中使用的文件结构不同。 stylesheets.css 位于远程存储库的根文件夹中，但在本地环境中不存在。可能您的页面和 stylesheets.css 在这两种情况下都在同一个文件夹中，但两种情况的区别在于它们在一种情况下位于 root 中，而在另一种情况下不在 root 中。

【讨论】：

你好，@Lajos Arpad！我也在上面的评论中提到过，但我相信你是对的。我的网站文件夹托管在网站文件夹中，该文件夹嵌套在我的E: 驱动器上的另一个文件夹中（依此类推几次）。因此，我怀疑浏览器在查找 root 时存在问题，而 Github 上的 repo 具有明确的 root。
@ryderd，在回答之前我已经阅读了您的 cmets，包括写给 Katreque 的那封邮件，并且根据我设法了解您的情况的信息。这就是我写答案的原因。您可能希望在不同版本中使用完全相同的文件夹结构。如果我的回答是正确的，那么您可以考虑接受它，这样以后遇到类似问题的访问者也会得到帮助。
You might want to use the very same folder structure in different versions 到底是什么意思？
我的意思是你可能有几个不同的回购。人们经常创建一个项目，它取得了成功，然后他们创建了其他类似的项目，它们在某种程度上有所不同。如果您遇到这种情况，那么您将从克隆初始项目开始。您将需要使用标准文件夹结构以避免混淆。您可以创建一个临时存储库，以便在部署之前也能够在线测试。