CSS-内部样式表有效。外部没有。怪异行为

Question

I am new to Bootstrap and ran into a strange problem. 我是Bootstrap的新手，遇到了一个奇怪的问题。 I am trying to include a cool hover effect for a facebook png image. 我正在尝试为Facebook png图像添加一个很酷的悬停效果。

Everything works fine when I put the CSS in the as an internal style rule. 当我将CSS作为内部样式规则放入时，一切正常。 It won't work when I put it in an external style sheet. 当我将其放在外部样式表中时，它将无法正常工作。

All the paths are working because I have been successfully overriding the default bootstrap CSS rules. 所有路径均有效，因为我已成功覆盖默认的引导CSS规则。

With an external style sheet the image link is there but the image does not display. 使用外部样式表时，图像链接在那里，但图像不显示。 Kind of hard to explain. 有点难以解释。 Not sure what to do? 不知道该怎么办？

http://jsbin.com/UFoRIYex/394/edit?html,css http://jsbin.com/UFoRIYex/394/edit?html,css

Here is a link to the website where I got the html/css from. 这是我从中获取html / css的网站的链接。 http://bradsknutson.com/blog/css3-ro...l-media-icons/ Like I said. http://bradsknutson.com/blog/css3-ro...l-media-icons/如我所说。 Everything works internally. 一切都在内部工作。 Just not externally.... 只是不在外部...

Answer 1

Try the bootstrap cdn (code copied direct from Bootstrap). 尝试bootstrap CDN（直接从Bootstrap复制的代码）。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer 2

Problem solved. 问题解决了。 I changed the path to ../img/facebook-hover.png and it worked.Thanks! 我将路径更改为../img/facebook-hover.png并成功了。谢谢！

CSS-内部样式表有效。外部没有。怪异行为

问题描述

2 个解决方案

解决方案1
0 2014-04-03 05:44:41

解决方案2
-1 2014-04-03 18:08:19

CSS-内部样式表有效。 外部没有。 怪异行为

问题描述

2 个解决方案

解决方案1 0 2014-04-03 05:44:41

解决方案2 -1 2014-04-03 18:08:19

CSS-内部样式表有效。外部没有。怪异行为

解决方案1
0 2014-04-03 05:44:41

解决方案2
-1 2014-04-03 18:08:19