Question

在这里完美运作CodePen：

并且没有在jsfiddle中工作：

由于没有工作，我的意思是导航栏完全搞砸了。添加了外部资源。怎么了？请帮忙！

    <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    <script src="https://use.fontawesome.com/43f8201759.js"></script>

    <!-- Navbar style available in Bootstrap framework-->
    <nav class="navbar navbar-fixed-top">
              <!-- /end-->
              <!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
              <div class="container-fluid">  
                <!-- /end -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
                  <!-- For screen readers only -->
                  <span class="sr-only">Toggle navigation</span>
                   <!-- /end -->
                   <!-- Hamburger menu button appears when browser window has been shrinked -->
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>
                  <!-- /end -->
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <a class="navbar-brand " href="http://codepen.io/ekilja01"><i class="fa fa-area-chart about" id="large"></i></a>
                </div>

                <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav navbar-right">
                    <li id="btnhome"><a href="#parallax"><strong>About</strong></a></li>
                    <li id="btnhome"><a href="#portfolio"><strong>Portfolio</strong></a></li>
                    <li id="btnhome"><a href="#"><strong>Contact</strong></a></li>
                  </ul>
                </div>
              </div>
            </nav>

         <section id="parallax">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-12 col-md-12 text-center">
                 <h1 class="about">web developer<br><i class="fa fa-code about"></i></h1>

                         </div>
                     </div>
                <!-- /.row -->
                 </div>
            <!-- /.container -->
            </section>

     <section id="portfolio">
                     <div class="row">
                         <div class="col-lg-12 col-md-12 text-center">
                             <h1>My skillset</h1>
                             <p class="lead"></p>
                 <div class="row">
                 <div class="col-sm-3">
                  <img  src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html"> 
                   <p><strong>HTML</strong></p>
                   </div>
                   <div class="col-sm-3">
                      <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css"><p><strong>CSS</strong></p>
                     </div>

                     <div class="col-sm-3">
                        <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript">
                       <p><strong>JavaScript</strong></p>
                       </div>
                       <div class="col-sm-3">
                      <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery">
                         <p><strong>jQuery</strong></p>
                         </div>
                     </div>
                     </div>
                   </div>
                   </div>
                   </div>
                         </div>
                     </div>
                <!-- /.row -->
                 </div>
            <!-- /.container -->
            </section>

and CSS

.navbar {
  min-height: 80px;
  margin-bottom: 0;
}

.navbar-toggle {
  color: black;
}
#btnnavbar {
  margin-top: 20px;
  color: black;
}

#btnhome {
  margin-top: 16px;
}

#large {
  font-size: 100px
}


#imgbrand {
  margin-top: -70px;
  margin-left: px;
  height: 220px;
  width: 280px;

}

#firstpage {
  margin-top: 90px;
}

#parallax { 
    /* The image used */
    padding-top: 200px;
    margin-top: 0px;
    background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478169039/codecademy_600_qd7qjv.jpg");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.about { 
  font-family: futura-pt, sans-serif;
  font-weight: 900;
  background: -webkit-linear-gradient(#D31027, #EA384D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead {
   font-family: 'Lato', sans-serif;

}

#portfolio {
   height: 500px; 
   padding-top: 200px;
}

.col-sm-3 {
  display:inline-block;  
}

/* link */
.navbar .navbar-nav > li > a {
    background: -webkit-linear-gradient(#D31027, #EA384D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* mobile version */
.navbar .navbar-toggle {
    border-color: #DDD;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}

Answer 1

看看你的外部资源，你正在使用的bootstrap链接是Bootstrap v2.3.2，在codepen中是3.3.7

Answer 2

jsfiddle对外部资源进行了更严格的协议检查。

您不应该在一个页面中混合http和https个请求。

如果通过https加载页面，Firefox会阻止http请求。

链接在JSFiddle中不起作用，但在CodePen中起作用

2 个答案: