引导导航折叠不起作用

Question

我已经尝试了一段时间，并尝试了几个不同的参考文档。尝试完全在没有 CSS 和 JS 的引导 HTML 中执行此操作（如果可能的话）我确信我错过了一些东西......

https://jsfiddle.net/1b1L2zsw/

<nav class="navbar navbar-dark bg-dark navbar-expand-lg" role="navigation">
    <div class="container">
        <a class="navbar-brand ml-auto" href="#">Store</a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

      </button>
        <div class="collaspe navbar-collapse" id="navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li class="active">
                    <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">New</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Collections</a>
                </li>
            </ul>

            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">`
            </form>
        </div>
    </div>
</nav>

Answer 1

我认为主要问题是您在 navbar-collapse div 的类名中拼错了“collapse”。虽然你确实有一个额外的结束 </button> 标签。

小提琴：https://jsfiddle.net/dsv5qnez/2/

编辑：您绝对需要包含 Bootstrap JavaScript 和 CSS 文件。没有办法用纯 HTML 做你想做的事。