引导可折叠导航按钮不可点击答案

【问题标题】：bootstrap collapsable nav button not clickable引导可折叠导航按钮不可点击
【发布时间】：2015-11-06 23:53:46
【问题描述】：

我正在尝试在网站上使用可折叠菜单，但我遇到了可折叠按钮的问题。它显示正常，但点击时没有响应。

这可能是我缺少的一些简单的东西。任何帮助都会很棒！

<nav class="navbar-default" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <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>
              <div class="col-md-4 logo">
                <h1><a href="index.php"></a></h1>
              </div><!--.logo-->
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
              <ul class="nav navbar-nav">
                <ul>
                  <li><a class="about" href="#">About</a></li>
                  <li><a class="products" href="#">Products</a></li>
                  <li><a class="technology" href="#">Technology</a></li>
                </ul>
              </ul>
            </div><!-- /.navbar-collapse -->
          </nav>

【问题讨论】：

对我来说很好..jsfiddle.net/5jy5A.
我想知道为什么它对我来说不可点击...
你在加载 bootsrtap 脚本吗？
是的，其他一切正常

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

对不起，我不能发表评论.. 但是你加载了 jQuery 吗？因为点击是在那里处理的。

【讨论】：

是的，正如我所说，其他一切都很好。我确实弄清楚发生了什么。似乎因为徽标是 h1，一个块级元素，即使它出现了，它也覆盖了按钮。一旦我将其更改为内联元素，它就可以正常工作了。

【解决方案2】：

它可能被另一个块覆盖，因此请尝试为该导航设置更高的 z-index 值。

<nav class="navbar-default" style="z-index:1;" role="navigation">

【讨论】：

【解决方案3】：

在我的情况下，它不是 z-index，它被掩盖了，因为我将它的样式设置为 float: left，而下一个 div 正在掩盖它。 z-index 没有修复它。

要修复它，下一个同级 div 必须是 display: inline-block;。

【讨论】：