Question

我希望有人可以帮我弄清楚为什么我的Bootstrap导航栏崩溃不起作用。从我从Bootstrap示例中看到的，它应该工作。当我在移动设备上查看页面或只是缩小窗口时，导航链接会按原样折叠，但展开它的按钮不会显示。

<nav class="navbar">
    <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a href="#" class="pull-left"><img src="/images/logo.png"></a> </div>
    <div class="navbar-collapse collapse">
        <div class="navbar-right"><a href="/contact">CONTACT</a></div>
        <div class="navbar-right"><a href="/about">ABOUT</a></div>
        <div class="navbar-right"><a href="/ourteam">OUR TEAM</a></div>
        <div class="navbar-right"><a href="/work">WORK</a></div>
        <div class="navbar-right"><a href="/services">SERVICES</a></div>
    </div>
    </div>
</nav>

修改

我查看了评论并检查了所有内容。 jquery没有加载存在问题，但我解决了这个问题。但仍然在发生。

Answer 1

按钮中的数据目标是.navbar-ex1-collapse，但您没有将其包含在<div class="navbar-collapse collapse">包含该内容并试用。

导航栏折叠导航无法正常工作

1 个答案: