Question

我正在尝试使用带有切换功能的bootstrap导航栏。使用如下示例代码，我的页面未在标题栏上显示切换按钮。 NavHeader（NavBarMenuCaption）和第一个菜单项出现在同一行。

Bootply链接http://www.bootply.com/123050#

以下代码可能有什么问题？

 <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstap menu demo</title>
    <link rel="stylesheet" href="vendor/bootstrap-3.1.1-dist/css/bootstrap.min.css">
    </head>
    <body>
    <h2>This is bootstap navbar demo</h2>
    <nav class="navbar navbar-default">
        <div class="navbar-header"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar">-</span>
             <span class="icon-bar">-</span>
             <span class="icon-bar">-</span>
          </button>
          <a class="navbar-brand" href="#">NavBarMenuCaption</a>
       </div>
        <div class="navbar-collapse collapse" id="example-navbar-collapse">
            <ul class="nav nav-pills nav-stacked">
                <li ><a href="#">Home</a></li>
                <li class="active"><a href="#">About</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
    <script type="text/javascript" src="vendor/jquery-2.1.0/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
</body>

Answer 1

变化：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

为：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

和

<ul class="nav nav-pills nav-stacked">

为：

<ul class="nav navbar-nav">

切换按钮应该出现！

bootstrap 3.1.1 navbar - 切换按钮不会出现在页面上

1 个答案: