2017-09-11 9 views
0

に取り組んでいません。Scrollspyブートストラップ4ベータ - 私は私のポートフォリオページのためのブートストラップ4 Scrollspy機能を使用しようとしているが、私はそれがCodepenで動作させることはできませんCodepen

私はStackOverflowの中で検索し、誰かがCodeplyでこの機能を使用することを発見し、here’s the link、そしてそれだけで正常に動作します。

コードを取ってCodepenに入れましたが、動作させることができませんでした:here’s the link。これがHTMLです。

<body data-spy="scroll" data-target="#navbarCodeply" data-offset="70"> 
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light"> 
    <div class="container"> 
     <a class="navbar-brand" href="#">Codeply</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCodeply"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarCodeply"> 
     <ul class="nav navbar-nav"> 
      <a class="nav-link" href="#sec1">One</a> 
      <a class="nav-link" href="#sec2">Two</a> 
      <a class="nav-link" href="#sec3">Three</a> 
     </ul> 
     </div> 
    </div> 
</nav> 
<div class="container"> 
    <h6 class="mb-5">Bootstrap 4 Scrollspy Example</h6> 
    <div class="row"> 
    <div class="col-12 col-sm-8"> 
     <h3 id="sec1">One</h3> 
     <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, 
      raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. 
      Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 

     <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
      readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
      forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p> 
     <hr> 
     <h3 id="sec2">Two</h3> 
     <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, 
      raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. 
      Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 

     <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
      readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
      forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p> 
     <h3 id="sec3">Three</h3> 
     <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, 
      raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. 
      Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 

     <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
      readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
      forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p> 
    </div> 
    </div> 

そして、これはCSSです。

body { 
    position: relative; 
    overflow-y: auto; 
    padding-top: 70px; /* padding for fixed navbar */ 
} 

Codepenでスクロールすると、ナビゲーション項目は変更されませんが、Codeplyでは変更されます。

は誰が悪いのか知っていますか?

ご協力いただきありがとうございます。

Juan Betancourt。

PS:私はそれは問題がCSSとJavaScriptペンの設定やbodyタグの属性であることも可能だと思います。

答えて

0

ブートストラップ4が

/popper.js/1.11.0/umd/popper.min.js 

.. Popper.jsを必要Codeplyが自動的にブートストラップ4を選択したときに、それが含まれていますが、codepenません。

関連する問題