Question

我在Bootstrap 3.0中创建了导航栏但是当我折叠页面并按下煎饼按钮时，我的菜单项不会出现。

我做错了什么？

<div class="container">
    <div class="row"> 
        <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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" rel="home" href="/" title="Bryan Collins Portfolio">Bryan Collins Portfolio</a>
            </div>

            <div class="collapse navbar-collapse" id="collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

        </nav>
    </div>
</div>

我按照你的建议更改了代码。应该是这样的吗？

<div class="container">
    <div class="row"> 
        <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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" rel="home" href="/" title="Bryan Collins Portfolio">Bryan Collins Portfolio</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>

        </nav>
    </div>
</div>

Answer 1

测试。

<div class="navbar-wrapper">
    <div class="container">
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <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" rel="home" href="/" title="Bryan Collins Portfolio">Blank</a> 
</div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    </div>
    </div>
    </div>
    </div>

Answer 2

您的代码似乎运行正常：http://jsfiddle.net/HtgCq/

您是否包含了jQuery和所需的js文件，如documentation

中所述

插件依赖

响应式导航栏要求折叠插件包含在您的Bootstrap版本中。

（因为SO希望我包含代码）只需将这样的内容添加到您的标记中：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

我的响应式导航栏出现问题

2 个答案: