Question

当我的页面足够小以显示可折叠的导航栏时，可以单击或点击该图标，它将打开导航栏。但是，如果再次单击或点击它，它将不会关闭。我不确定为什么。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">
            <a href="/mwlas/" class="navbar-brand">
                <img src="/mwlas/_img/logo.png" alt="logo"/>
                <span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a href="/mwlas/" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="/mwlas/portfolio" class="nav-link">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a href="/mwlas/shop" class="nav-link">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a href="/mwlas/blog" class="nav-link">Blog</a>
                    </li>
                </ul>
                <form class="form-inline">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="button"
                            onclick="location.href='/mwlas/login.php'">Login
                    </button>
                </form>
            </div>
        </nav>
    </header>

Answer 1

查看页面的源代码，您两次导入了脚本（jQuery，popper和bootstrap.js）。

这导致了一些问题/冲突。确保完全按照Getting started指南中的说明进行导入

仅导入脚本一次，问题应该消失。

轻按图标时Bootstrap 4导航栏关闭

1 个答案: