Bootstrap 3 导航切换不工作

Question

我从文档中复制了导航栏示例，它运行良好。我进行了几次编辑，但现在切换按钮不起作用。我查看了 Whosebug 中的几个线程，但没有找到任何对我有帮助的东西。这是我的代码：

<div class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#addressToolBar">
                <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="dropdown">
                <button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a>4203 Afton Ln, 78744</a></li>
                    <li><a>4511 Elwood Rd, 78722</a></li>
                    <li><a>8518 FM 1826, 78736</a></li>
                    <li class="divider"></li>
                    <li><a><i class="fa fa-plus"></i>  add new</a></li>
                    <li class="divider"></li>
                    <li><a><i class="fa fa-mail-forward"></i>  import</a></li>
                </ul>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="addressToolBar">
            <form class="navbar-form navbar-left address-search" role="search">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </span>
                    </div>                                                                
                </div>                                                            
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Other <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a><i class="fa fa-mail-reply"></i> export</a></li>
                        <li><a><i class="fa fa-file-excel-o"></i> get all invoices</a></li>
                        <li><a><i class="fa fa-usd"></i> billing options</a></li>
                        <li class="divider"></li>
                        <li><a><i class="fa fa-trash"></i> delete</a></li>
                    </ul>
                </li>
                <li><a><i class="fa fa-edit"></i> Edit</a></li>
                <li><a><i class="fa fa-plus"></i> Add New</a></li>
            </ul>
        </div>
    </div>
</div>

Here is a (non-working) fiddle.

Answer 1

您的导航开关工作正常。问题是由这段代码引起的

<div class="dropdown">
    <button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a>4203 Afton Ln, 78744</a></li>
        <li><a>4511 Elwood Rd, 78722</a></li>
        <li><a>8518 FM 1826, 78736</a></li>
        <li class="divider"></li>
        <li><a><i class="fa fa-plus"></i>  add new</a></li>
        <li class="divider"></li>
        <li><a><i class="fa fa-mail-forward"></i>  import</a></li>
    </ul>
</div>

相对于位置，它覆盖了导航的整个宽度，因此切换按钮在它后面，无法按下。

您可以考虑更改位置或添加 z-index:xxxx；到切换按钮以将其保留在顶层。

Answer 2

您的切换按钮的 z-index 低于其他元素，因此您可以 select 它。只需将此行添加到您的 CSS 即可解决问题：

.navbar-toggle {
    z-index: 100000;
}

See Bootply供参考

Bootstrap 3 导航切换不工作

Bootstrap 3 Navigation Toggle not working

javascript

twitter-bootstrap-3