Question

我正在尝试修复其他人写的网站。大多数事情似乎都有效，除了响应式视图中的菜单。＆＃34;汉堡＆＃34;按钮确实出现，但它不可点击。 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文件的内容添加到JSFiddle，请告诉我。他们似乎与我无关。

Answer 1

这似乎对我有用 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文件（外部资源）。

Answer 2

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

Bootstrap响应式菜单无法点击

2 个答案: