Bootstrap 4 - Scrollspy 不工作

新手上路,请多包涵

我按照BS4中关于如何使用Scrollspy的文档进行了操作,但是它不起作用,那么我该如何解决呢?

我的身体有 posistion: relative

这是我的身体标签:

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

这是导航栏的 HTML:

 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">

        <a class="navbar-brand" href="/">
            <img src="/images/logo_placeholder.jpg" width="90" height="45" class="d-inline-block align-top" alt="">
            Jalinen
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Nieuws</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Diensten</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Calamiteiten</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Gallerij</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

为什么它不起作用?

笔记:

什么都不起作用。

导航栏甚至不粘在页面顶部。

原文由 Luuk Wuijster 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 386
2 个回答

确保您正在使用 fixed-top 将导航栏附加到顶部,

 <nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  ..
</nav>

和身体标签:

<body data-spy="scroll" data-target="#navbar1" data-offset="70">

Bootstrap 4 Scrollspy 演示

编辑: navbar-toggleable-md --- 在 Bootstrap 4.0.0 中更改为 navbar-expand-lg

原文由 Zim 发布,翻译遵循 CC BY-SA 4.0 许可协议

您的内容部分必须具有唯一 ID (#about),该 ID 连接到导航中的锚点。 (您的#home ID 仅有效)

正确的:

             <li class="nav-item active">
                <a class="nav-link" href="#home">Home </a>
            </li>

错误的:

             <li class="nav-item">
                <a class="nav-link" href="#">Nieuws</a>
            </li>

原文由 Dražen 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题