时间戳

首页 > 解决方案 > 如何使用 Bootstrap4/Scrollspy - 无标签

bootstrap-4 - 如何使用 Bootstrap4/Scrollspy - 无标签

问题描述

在 Rails 中我不能设置<body>属性，所以我必须遵循 bootstrap4文档：

在监视 以外的元素时<body>，请确保设置了高度并溢出-y：滚动；应用。

但是如何看起来像一个有效的例子？

我的代码如下所示：

 <div class="row">
    <div class="col-12">
        <nav id="navbar-orders-now-status" class="navbar navbar-light bg-light">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link" href="#SECTION1">SECTION1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#SECTION2">SECTION2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#SECTION3">SECTION3</a>
                </li>
            </ul>
        </nav>


        <div class="row" data-spy="scroll" data-target="#navbar-orders-now-status" data-offset="0" style="height: 300px; overflow-y: scroll;">
            <div class="col-12">

                    <h4 id="SECTION1">SECTION1</h4>
                    <table class="table table-sm">
                     ...
                    </table>

                    <h4 id="SECTION2">SECTION2</h4>
                    <table class="table table-sm">
                    ...
                    </table>

                    <h4 id="SECTION3">SECTION3</h4>
                    <table class="table table-sm">
                    ...
                    </table>

            </div>
        </div>
    </div>

当我单击 section3 链接（例如）时会发生什么情况，焦点跳转到锚位置 section3，然后重新加载页面并将焦点设置在 section1 上。此外，当我滚动浏览可滚动窗口时，部分链接不会突出显示。

标签： bootstrap-4

解决方案

我能够修复它并将其移动到工作中。以下代码在 RAILS 5 环境中运行，无需修改<body>标签。

<div class="row">
<div class="col-12">
    <nav id="navbar-orders-now-status" class="navbar" style="background-color: #ffeeb2">
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#SECTION1" data-turbolinks="false">SECTION1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#SECTION2" data-turbolinks="false">SECTION2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#SECTION3" data-turbolinks="false">SECTION3</a>
            </li>
            ...
        </ul>
    </nav>
</div>


<div class="row" data-spy="scroll" data-target="#navbar-orders-now-status" data-offset="0" style="height: 300px; overflow-y: scroll;">
    <div class="col-12">
        <h4 id="SECTION1">SECTION1</h4>
        <table class="table table-sm">
            ...
        </table>
        <h4 id="SECTION2">SECTION2</h4>
        <table class="table table-sm">
            ...
        </table>
        <h4 id="SECTION3">SECTION3</h4>
        <table class="table table-sm">
            ...
        </table>
    </div>
</div>

推荐阅读