Bootstrap响应式菜单无法点击

Question

Bootstrap响应式菜单无法点击

twitter-bootstrapmenuresponsive-designhamburger-menu

3

我正在尝试修复别人编写的网站。大多数东西似乎都能正常工作，除了响应式视图中的菜单。 "汉堡包"按钮确实出现了，但是无法点击。CSS有点庞大，我不太知道从哪里开始。

这是我在该按钮下看到的响应式视图：

   <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>

那个data-target应该指向哪里？

另外，请告诉我是否需要将JavaScript文件的内容添加到JSFiddle中。对我来说，它们似乎不相关。

- Dave

是的，您需要引入Bootstrap JS文件。 - David Nguyen

https://dev59.com/YIrda4cB1Zd3GeqPPrBq#30152946 - Cisum Inas

添加 .js 没有帮助。 - Dave

看看这个。响应式菜单在我的fiddle上运行。只需要像@DavidNguyen提到的那样添加bootstrap js文件 - http://jsfiddle.net/hw86qpLc/6/ - Nifal Munzir

谢谢！我知道问题出在哪里了。之前我把Bootstrap js放在其他javascript文件之前，导致菜单损坏。现在把它列在最后好像解决了这个问题。 - Dave

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dave · Answer 1

原来我只需要 Bootstrap 的 Collapse js 组件。在 Bootstrap Customizer 网站上下载了它，一切都开始正常工作了。

- serhanp · Answer 2

这对我来说似乎是有效的。
http://jsfiddle.net/9j15q8p7/1/

<body class="theme-invert" onload="prettyPrint()">
 <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <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>
            <a class="navbar-brand" href="/"><img src="/img/logo.png" width="245" height="29" /></a><br><br><br>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
     <li><a href="/">Home</a></li>
     <li><a href="/page2">Page 2</a></li>
     <li><a href="/page3">Page 3</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div style="max-width:1000px; margin:0 auto; padding-bottom:20px;">

<article class="markdown-body">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus 
                                        justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis, 
                                        ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet 
                                        vulputate. Nulla quis nibh ipsum, sed egestas justo. Morbi ut ante mattis orci convallis tempor. 
                                        Etiam a lacus a lacus pharetra porttitor quis accumsan odio. Sed vel euismod nisi. Etiam convallis 
                                        rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien. 
                                        Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi. 
                                        Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>

您需要将外部 JavaScript 和 CSS 文件放在左侧菜单中 (外部资源)。