twitter-bootstrap Bootstrap 4 - Scrollspy 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42601470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - Scrollspy not working
提问by Luuk Wuijster
I have followed the documentation on how to use Scrollspy in BS4, but it is not working, so how do I solve it?
我已经按照有关如何在 BS4 中使用 Scrollspy 的文档进行操作，但它不起作用，那么我该如何解决呢？
My body has posistion: relative
我的身体有 posistion: relative
This is my body tag:
这是我的身体标签：
<body data-spy="scroll" data-target=".navbar">
And this is the HTML for the 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>
Why is it not working?
为什么它不起作用？
Note:
笔记：
Nothing works atm.
没有任何工作 atm。
The navbar doesn't even stick to the top of the page.
导航栏甚至不贴在页面顶部。
回答by Zim
Make sure you're using fixed-topto attach the navbar to the top,
确保您使用的fixed-top是将导航栏附加到顶部，
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
..
</nav>
and the body tag:
和身体标签：
<body data-spy="scroll" data-target="#navbar1" data-offset="70">
<body data-spy="scroll" data-target="#navbar1" data-offset="70">
EDIT:navbar-toggleable-mdhas changed to navbar-expand-lgin Bootstrap 4.0.0
编辑：navbar-toggleable-md已更改为navbar-expand-lg在引导4.0.0
回答by Dra?en
You content sections must have unique ID (#about) which is connected to an anchor in the navigation. (Your #home ID is valid only)
您的内容部分必须具有唯一 ID (#about)，该 ID 连接到导航中的锚点。（您的#home ID 仅有效）
Correct:
正确的：
<li class="nav-item active">
<a class="nav-link" href="#home">Home </a>
</li>
Wrong:
错误的：
<li class="nav-item">
<a class="nav-link" href="#">Nieuws</a>
</li>
