Html Scrollspy引导程序4-不使用Codepen_Html_Bootstrap 4_Scrollspy_Codepen

Html Scrollspy引导程序4-不使用Codepen

html bootstrap-4

Html Scrollspy引导程序4-不使用Codepen,html,bootstrap-4,scrollspy,codepen,Html,Bootstrap 4,Scrollspy,Codepen,我试图在我的公文包页面上使用Bootstrap4ScrollSpy功能，但我无法在Codepen中使用它我在StackOverflow中搜索了一下，发现有人在Codeply中使用了这个特性，它工作得很好我把代码放在代码笔上，但无法使其工作：。这是HTML <body data-spy="scroll" data-target="#navbarCodeply" data-offset="70"> <nav class="navbar navbar-expand-md fix

我试图在我的公文包页面上使用Bootstrap4ScrollSpy功能，但我无法在Codepen中使用它

我在StackOverflow中搜索了一下，发现有人在Codeply中使用了这个特性，它工作得很好

我把代码放在代码笔上，但无法使其工作：。这是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>

如您所见，当您在Codepen中向下滚动时，导航项不会改变，但在Codeply中会改变

有人知道怎么了吗

提前感谢你的帮助

胡安·贝当古

PS：我认为可能是CSS和JavaScript笔设置或body标记属性有问题。

Bootstrap 4需要Popper.js

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

当您选择“bootstrap4”时，Codeply会自动包含它，但不会包含它。

bootstrap4需要Popper.js

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

当您选择“引导4”时，Codeply会自动包含它，但不会