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

引导程序文件没有正确链接Jaime。

您是否正在使用cdn链接或者您正在使用引导程序文件的本地源（bootstrap.css和bootstrap.js），请确保通过在Chrome中按F12从控制台进行检查来正确链接它们当您进入网页并点击console。

时

检查是否显示任何遗失文件错误并相应更正。

CSS未加载

1 个答案: