Html 链接不'；不在JSFIDLE中工作，但在CodePen中工作

代码笔在这里非常有效：

在JSFIDLE中不起作用：

我的意思是导航栏完全乱了。添加了外部资源。怎么了？请帮忙

    <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;
    }
}

切换导航





web开发人员

我的技能

HTML

CSS

JavaScript

jQuery

和CSS
navbar先生{
最小高度：80px；
页边距底部：0；
}
.导航栏切换{
颜色：黑色；
}
#Btnavbar{
边缘顶部：20px；
颜色：黑色；
}
#布特霍姆酒店{
边缘顶部：16px；
}
#大的{
字体大小：100px
}
#伊姆布兰德{
利润上限：-70px；
左边距：px；
高度：220px；
宽度：280px；
}
#首页{
边缘顶部：90像素；
}
#视差{
/*使用的图像*/
填充顶部：200px；
边际上限：0px；
背景图像：url（“http://res.cloudinary.com/ekilja01/image/upload/v1478169039/codecademy_600_qd7qjv.jpg");
/*设定一个特定的高度*/
高度：500px；
/*创建视差滚动效果*/
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
颜色：白色；
}
.关于{
字体系列：futura pt，无衬线；
字号：900；
背景：-webkit线性梯度（#D31027，#EA384D）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.铅{
字体系列：“Lato”，无衬线；
}
#投资组合{
高度：500px；
填充顶部：200px；
}
.col-sm-3{
显示：内联块；
}
/*链接*/
.navbar.navbar nav>li>a{
背景：-webkit线性梯度（#D31027，#EA384D）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
/*手机版*/
.navbar.navbar切换{
边框颜色：#DDD；
}
.navbar.navbar切换：悬停，
.navbar.navbar切换：焦点{
背景色：#DDD；
}
.导航栏.导航栏切换.图标栏{
背景色：#CCC；
}
@介质（最大宽度：767px）{
.navbar.navbar导航打开.下拉菜单>li>a{
颜色：#777；
}
.navbar.navbar导航打开.下拉菜单>li>a:悬停，
.navbar.navbar导航打开.下拉菜单>li>a:焦点{
颜色：#333；
}
}

查看您的外部资源，您使用的引导链接是引导v2.3.2，在codepen中是3.3.7

查看您的外部资源，您使用的引导链接是引导v2.3.2，在codepen中是3.3.7

JSFIDLE对外部资源有更严格的协议检查

您不应该在一个页面中混合使用

http

和

https

请求

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

---

JSFIDLE对外部资源有更严格的协议检查

您不应该在一个页面中混合使用

http

和

https

请求

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

---

可能其中一个站点对外部资源进行了更严格的协议检查。您不应该混合使用

http

和

https

。两个示例投票关闭的CSS源并不相同，因为这通常可以通过识别和仔细检查JSFIDLE来避免。您没有将jquery作为外部资源加载，并且您使用的是旧的引导@康奈索谢谢你们！可能其中一个站点对外部资源有更严格的协议检查。您不应该混合使用

http

和

https

。两个示例投票关闭的CSS源并不相同，因为这通常可以通过识别和仔细检查JSFIDLE来避免。您没有将jquery作为外部资源加载，并且您使用的是旧的引导@康奈索谢谢你们！