html - CSS 未加载

Question

昨晚我完成了网站标题的样式设计。它看起来与像素完全一样。

但是今天早上打开我的作品时，它是这样的

没有对代码进行任何更改，所有文件和图像都应该是它们应该的样子。 (实际上，我唯一的改变是将“家庭、工作、信息、联系方式”变成文本，而不是使用他们的图片。

这是我的代码:

<header>
    <div class="containter">
     <div class="row">
      <div class="top-bar">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <a class="nav-logo" href="index.html">
                <img class="nav-logo" src="img/logoF.png" alt="Logo" height="94">
            </a> 
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="work.html">Work</a></li>
            <li><a href="index.html"><img class="name-layout" src="img/HeaderName.png"></a></li>
            <li><a href="info.html">Info</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
            <div class="container social-layout">
                <a class="social-media" href="#"><img src="img/FaceBook.png" alt="FB"></a>
                <a class="social-media" href="#"><img src="img/Twitter.png" alt="TW"></a>
                <a class="social-media" href="#"><img src="img/Instagram.png" alt="IG"></a>
                <a class="social-media" href="#"><img src="img/YouTube.png" alt="YT"></a>
            </div>
        </div> <!--/.nav-collapse -->
      </div>
    </div>
  </div>
    </div>
</header>

还有我的CSS

/*
Main Website
Author: Jaime Wissner
version: 1.0
*/
/* Base- Base styles, variables, mixins... */
/* line 2, ../scss/base/_base.scss */
.layout-blue {
  background-image: url(img/Background.png);
  background-repeat: repeat;
}

/* line 7, ../scss/base/_base.scss */
.layout-banner {
  height: 96px;
}

/* Modules - Individual site components */
/* Layout - Page layout */
/* line 1, ../scss/layouts/_nav.scss */
.nav-logo {
  margin-left: 1em;
  margin-top: 1em;
}

/* line 6, ../scss/layouts/_nav.scss */
.navbar-nav {
  padding-top: 2em;
  padding-left: 0;
}

/* line 11, ../scss/layouts/_nav.scss */
.nav-links {
  font-size: 18px;
  font-weight: 400;
  font-family: "trajan-sans-pro", sans-serif;
  color: #000000;
}

/* line 18, ../scss/layouts/_nav.scss */
.top-bar {
  height: 136px;
  width: auto;
  background-image: url(img/Header.png);
  background-repeat: repeat;
}

/* line 24, ../scss/layouts/_nav.scss */
.social-media {
  padding: 5px;
}

/* line 28, ../scss/layouts/_nav.scss */
.name-layout {
  margin-top: -15px;
}

/* line 36, ../scss/layouts/_nav.scss */
.heading {
  box-shadow: 10px 10px 0px #000000;
}

我做错了什么？或者发生了什么事？显然，我也在使用 Bootstrap。

更新:我重新输入了 scss 文件中图像的链接，(没有更改，只是重新输入)，当它重新编译时，

http://i.imgur.com/yNXFglY.png

我没有更改任何内容，但 Scout 检测到更改并重新编译。这是来自 SASS 还是 Scout 的错误？

Answer 1

Bootstrap 文件未正确链接 Jaime。

无论您使用的是 cdn 链接还是使用引导文件的本地源(bootstrap.css 和 bootstrap.js)，请在您访问时在 Chrome 中按 F12 以从您的控制台检查它们是否正确链接在您的网页中，然后单击 console。

检查那里是否显示任何丢失的文件错误并相应地更正它们。