Bootstrap 4でscrollspyが動作しないのはなぜですか？

私はドキュメントに正確に従っているようですが、なぜそれらがnavbarリスト項目のテキストをそれらのセクションまでスクロールして強調表示しないのか分かりません。ここでBootstrap 4でscrollspyが動作しないのはなぜですか？

<!-- nav--> 
<nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-xl 
bg-primary fixed-top"> 
    <div class="container"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarNavAltMarkup" aria- 
    controls="navbarNavAltMarkup" aria-expanded="false" aria- 
    label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
    <div class="navbar-nav"> 
     <a class="nav-item nav-link text-white" href="#home">Home</a> 
     <a class="nav-item nav-link text-light" href="#about">About</a> 
     <a class="nav-item nav-link text-light" 
      href="#speakers">Speakers</a> 
     <a class="nav-item nav-link text-light" 
     href="#schedule">Schedule</a> 
    </div> 
    </div> 
    <a class="hidden-xs-down navbar-brand text-white" 
    href="#">Presented by Treehouse</a> 
    </div> 
</nav>

私はそれまでスクロールしたときにハイライト表示されません本体部の一例です：

<body data-spy="scroll" data-target=".navbar" id="home">

はここに私のナビゲーションバーです：

は、これは私の体のタグです

<!--about--> 
     <div class="row" id="about"> 
      <div class="col-md-4"> 
       <h3 class="mb-4">About Full Stack Conf</h3> 
       <!--Why won't the image shape change?--> 
       <img class="mb-3 img-fluid rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland"> 
       <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p> 
       <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3 class="mb-4">Expert Speakers</h3> 
       <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p> 
       <p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p> 
       <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3 class="mb-4">What You'll Learn</h3> 
       <ul> 
        <li><strong>MongoDB</strong>: NoSQL database</li> 
        <li><strong>Angular</strong>: JavaScript framework</li> 
        <li><strong>Express</strong>: Framework for Node</li> 
        <li><strong>Node.js</strong>: JavaScript environment</li> 
        <li><strong>ES2015</strong>: Latest version of JavaScript</li> 
        <li><strong>Babel</strong>: JavaScript compiler</li> 
       </ul> 
      </div> 
     </div> 
     <!-- /about -->

出典

2017-09-17 smontoro14

これは機能していますが、リンク上にあるtext-*クラスが表示されているクラスをオーバーライドしていますactiveクラスのce。 navbar-dark代わりに使用し、体がposition:relativeであることを確認してください...

https://www.codeply.com/go/MbK0piY1HL

<nav class="navbar navbar-expand-lg navbar-dark navbar-toggleable-xl bg-primary fixed-top"> 
</nav>

出典

2017-09-18 11:14:25 ZimSystem

私はリンクからの.text-白のクラスを削除すると、.navbar-暗いし.navbar光を変更し、位置を追加する：CSSに関連して、それはちょうどテキストを見ることができないように、navbarと同じ青色の線をリンクに変え、まだスクロールしても何も起こらない。私のコードはあなたのコードスニペットと同じように見えますが、なんらかの理由でまだ動作していません。 – smontoro14

Bootstrap 4でscrollspyが動作しないのはなぜですか？

答えて

関連する問題