Question

我已经尝试了一段时间，并尝试了几种不同的参考文档。尝试在没有CSS和JS的情况下纯粹在bootstrap HTML中执行此操作（如果可能）我确信我遗漏了一些东西...

<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

我认为主要问题是你拼写错误＆＃34;崩溃＆＃34;在navbar-collapse div的类名中。虽然您确实有额外的结束</button>标记。

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

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

Bootstrap Nav折叠不起作用

1 个答案: