Bootstrap响应菜单不可单击



我正在尝试修复别人写的网站。大多数事情似乎都起作用,除了响应式视图中的菜单。确实出现了"汉堡"按钮,但这不是可单击的。CSS有点巨大,我不知道从哪里开始。

jsfiddle

这是该按钮下的响应视图中看到的内容:

   <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。他们似乎与我无关。

这似乎对我有用。
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文件放在左侧的菜单中(外部资源)。

事实证明,我只需要Bootstrap的Collapse JS组件即可。在Bootstrap Customizer网站上下载了它,一切都开始工作。

相关内容

  • 没有找到相关文章

最新更新