繁体   English   中英

Bootstrap 和样式表未在本地加载

[英]Bootstrap and Stylesheet not loading Locally

我有以下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 ChromeFirefox

但是,当我推送到我的Github Pages存储库时,样式已应用并起作用。

旁注:某些对齐样式似乎适用,但没有填充、颜色等。

尝试在<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">

可能是外部链接的问题。

这部分代码似乎是问题所在:

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM