0

I have created navbar in Bootstrap 3.0 but when I collapse the page and press the pancake button, my menu items don't appear.

What am I doing wrong?

<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>

I changed the code as you suggested. Should it look like this?

<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>
4

2 回答 2

0

经测试。 

<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>
于 2013-10-08T20:45:57.873 回答
0

您的代码似乎工作得很好：http: //jsfiddle.net/HtgCq/

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

插件依赖

响应式导航栏要求您的 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>
于 2013-10-08T22:00:07.833 回答