Bootstrap和样式表未在本地加载

时间:2016-12-19 17:15:40

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

我有以下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存储库时,样式已应用并正常工作。

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

2 个答案:

答案 0 :(得分:0)

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

可能是外部链接的问题。

答案 1 :(得分:0)

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

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

看起来您在本地使用的文件结构与您在远程仓库中使用的文件结构不同。 stylesheets.css位于远程仓库的根文件夹中,但在本地环境中不存在。可能你的页面和stylesheets.css在两次出现时都在同一个文件夹中,但两种情况的区别在于它们在一个案例中是root用户而在另一个案例中不在root用户。