Twitter bootstrap 引导响应菜单不可单击_Twitter Bootstrap_Menu_Responsive Design_Hamburger Menu

Twitter bootstrap 引导响应菜单不可单击

twitter-bootstrap menu responsive-design

Twitter bootstrap 引导响应菜单不可单击,twitter-bootstrap,menu,responsive-design,hamburger-menu,Twitter Bootstrap,Menu,Responsive Design,Hamburger Menu,我正在尝试修复一个由其他人编写的站点。除了响应视图中的菜单外，大多数东西似乎都能正常工作。“汉堡包”按钮确实出现，但不可点击。CSS有点大，我不知道从哪里开始这是在该按钮下的响应视图中看到的内容： <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span c

我正在尝试修复一个由其他人编写的站点。除了响应视图中的菜单外，大多数东西似乎都能正常工作。“汉堡包”按钮确实出现，但不可点击。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>

数据目标应该指向哪里

另外，如果我还需要将JavaScript文件的内容添加到JSFIDLE，请告诉我。它们似乎与我无关。

这似乎对我有用。











标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳斯·阿克·奎姆·里苏斯，在坦普斯
胡斯托。这是我的名言。奎斯克·维塔·亨德雷特sem。佩伦茨克的洛勒姆·费利斯，
这是我的名字，我的名字是。毛里斯和洛伦奎姆。金樱子
胡说八道。这是我的错，我的错。暂时性精神分裂症。
这是一个缺陷，是一个缺陷。我是尤伊斯莫·尼西。康瓦利斯酒店
朗卡斯·杜伊奎斯·尤伊斯莫。Maecenas lorem tellus、congue et调味品ac、ullamcorper非智人。
不要让马萨和利奥·森佩尔成为一个权杖。莫比·康格·马蒂斯·米。
Phasellus sed nisl vitae risus tristique pat。芦苇

您必须将外部JavaScript和CSS文件放在左侧的菜单中（外部资源）。

结果证明我只需要Bootstrap的Collapse js组件。在Bootstrap Customizer站点下载了它，一切都开始工作。

是的，您需要Bootstrap js文件。添加.js无助于检查这一点。响应菜单在我的小提琴上起作用。只需添加@davidnguen提到的引导js文件-谢谢！我知道问题出在哪里了。我之前将引导js放在其他javascript文件之前，这导致菜单中断。最后列出它似乎解决了这个问题。不过我必须保留当前的CSS，因为它已经被大量定制了。这就是为什么我将它粘贴到JSFIDLE的CSS框中。您也可以先链接默认的bootstrap.CSS，然后再链接您的。虽然那会太重而无法加载。我试过了，但当两者链接时，格式会被删除。这有点疯狂，但当我将你的小提琴代码保存为HTML+CSS时，我无法复制你的工作菜单版本。我包括了对引导js和css的两个外部引用，但它仍然不起作用。对我来说，它只在JSFIDLE窗口中工作。那么在你的网页上试试吧，我想JSFIDLE有点不对劲。

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