【问题标题】:Why won't scrollspy work in Bootstrap 4?为什么 scrollspy 在 Bootstrap 4 中不起作用?
【发布时间】:2017-09-17 22:05:24
【问题描述】:

我似乎完全遵循文档,但我不明白为什么它不会突出显示导航栏列表项文本作为向下滚动到这些部分。

这是我的身体标签:

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

这是我的导航栏:

<!-- 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>

这是一个当我向下滚动到它时不突出显示的正文部分的示例:

 <!--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 -->

【问题讨论】:

    标签: twitter-bootstrap bootstrap-4 scrollspy


    【解决方案1】:

    它正在工作,但链接上的 text-* 类覆盖了 active 类的外观。请改用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>
    

    【讨论】:

    • 当我从链接中删除 .text-white 类时,将 .navbar-light 更改为 .navbar-dark,并添加 position:relative 到 css,它只是将链接变成相同的阴影蓝色作为导航栏,这样您根本看不到文本,当我向下滚动时仍然没有任何反应。我的看起来和你的 codeply sn-p 一样,但由于某种原因它仍然无法正常工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-01-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多