Question

我看不出为什么我的导航菜单在较小的分辨率上不会崩溃。它是响应式的，但我没有得到整齐的下拉菜单，所有导航菜单项都只是显示。

如何让它崩溃？这是我的Navbar代码

<!-- Nav Bar -->
      <nav class="navbar navbar-inverse">
        <a href="index.html" class="pull-left visible-md visible-lg "><img src="http://pcduck.com/pirates/images/logo.jpg" class="img-responsive" alt="BlackHeart Pirates Guild Vault"/></a>
        <ul class="nav navbar-nav">
        <li class="active"><a href="http://pcduck.com/pirates/index.php" >Home</a></li>
        <li ><a href="http://www.blackheartpirates.com/forums/" >Forums</a></li>
        <li ><a href="#">Raids</a></li>
        <li ><a href="#">Apply</a></li>
        <li ><a href="http://pcduck.com/pirates/index.php/about">About</a></li>
        <li ><a href="#">Contact</a></li>
      </ul>
      </nav>
      <!--End Nav Bar -->

http://pcduck.com/pirates/index.php

Answer 1

您缺少一些显示＆＃34;汉堡包菜单的重要代码＆＃34;在较小的屏幕上并折叠您的导航链接。以下是您的导航栏代码应达到的效果：

<!-- Nav Bar -->
      <nav class="navbar navbar-inverse">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
           <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
        <li class="active"><a href="http://pcduck.com/pirates/index.php" >Home</a></li>
        <li ><a href="http://www.blackheartpirates.com/forums/" >Forums</a></li>
        <li ><a href="#">Raids</a></li>
        <li ><a href="#">Apply</a></li>
        <li ><a href="http://pcduck.com/pirates/index.php/about">About</a></li>
        <li ><a href="#">Contact</a></li>
      </ul>
          </div>
      </nav>
      <!--End Nav Bar -->

我遗漏了您的徽标图片，因为您需要决定它在屏幕上的位置。

Bootstrap导航菜单没有折叠

1 个答案: