Question

在Rails中，我无法设置<body>属性，因此我必须遵循bootstrap4 文档：

在监视<body>以外的其他元素时，请务必设置高度并使用overflow-y：scroll;应用

但是看起来像一个有效的例子怎么样？

这是我的代码的样子：

 <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链接（例如）时会发生什么，焦点跳转到锚定位置部分3，然后重新加载页面并在section1上设置焦点。此外，当我滚动滚动窗口时，部分链接将不会被高亮显示。

Answer 1

我能够解决它并将其移至工作状态。以下代码在RAILS 5 environemnt中运行，无需修改<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>

如何使用Bootstrap4 / Scrollspy - 没有标签

1 个答案: