html - Bootstrap 4 - Scrollspy 不工作

标签 html twitter-bootstrap bootstrap-4

BS4中Scrollspy的使用方法我已经按照文档做了,但是还是不行,请问怎么解决?

我的 body 有position: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>

为什么它不起作用?

注意:

在 atm 上什么都行不通。

导航栏甚至没有固定在页面顶部。

最佳答案

确保您使用的是 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 Demo

编辑: navbar-toggleable-md已更改为 navbar-expand-lgBootstrap 4.0.0

关于html - Bootstrap 4 - Scrollspy 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42601470/

相关文章:

html - 没有表格单元格和行高的垂直居中文本?

html - 将选定的列表项向右移动并溢出

Python BeautifulSoup 解析 HTML 时出错

javascript - 需要 JQuery 标记从数据库列表/数组中选中的复选框

twitter-bootstrap - 转换动画不适用于 Bootstrap 轮播中的第一张幻灯片

python - 使用 django 和 bootstrap 类创建单选表单的问题

html - 中间带有 Logo 的导航栏不会居中

html - Mirth : database reader, 如何处理从sql 查询返回的[多行]?

css - Bootstrap MaxCDN 不工作?

html - 在 CSS 中,如何响应地缩放多个重叠的图像?