Question

目前我正在使用Bootstrap v4构建导航栏，我发现在响应式视图中折叠期间的动画不正确。

因此，我检查了特定的导航栏，当我切换可折叠内容时，我发现类（.in和.show）在相同的元素中。

通过JavaScript或覆盖CSS是否有任何解决方案？

有关您的信息，请查看我的导航栏。

https://i.imgur.com/f4R48gv.jpg

TQ

编辑：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark top-nav">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="mainmenu">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item px-3"><a class="nav-link" href="#">ITEM 1</a></li>
            <li class="nav-item px-3"><a class="nav-link" href="#">ITEM 2</a></li>
            <li class="nav-item px-3"><a class="nav-link" href="#">ITEM 3</a></li>
        </ul>
        <div class="navbar-nav">
            <a class="nav-item nav-link px-3" href="#">SIGN IN</a>
            <div class="divider"></div>
            <a class="nav-item nav-link px-3" href="#">SIGN UP</a>
        </div>
    </div>
</nav>

以下是该文件的jsfiddle链接。 https://jsfiddle.net/Jeffrey_Teoh/4y6n6xt4/11/

Answer 1

您在文件顶部包含bootstrap版本3，在文件末尾包含bootstrap版本4 ...与jQuery相同。脚本应该只添加一次。

Navbar同时淡出和显示

1 个答案: