bootstrap导航无法正常工作

时间:2015-09-30 08:03:02

标签: css twitter-bootstrap jquery-mobile-navbar

这是navbar的代码,它适用于桌面,但当我使用响应时,菜单链接不起作用。我点击菜单,没有任何反应请帮助。

<header class="header">
    <div class="header-nav"> 
      <nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
        <div class="container">
          <div class="navbar-header">
            <button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a id="header-logo" href="index.php" class="navbar-brand"><img class="margin-top" src="images/logo.jpg" alt=""></a> </div>
          <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
            <ul class="nav navbar-nav style2 navbar-right">
              <li><a href="index.php">Home</a></li>
              <li><a href="about-us.php">About Us</a></li>
              <li><a href="gallery.php">Gallery</a></li>              
              <li><a href="contact.php">Contact</a></li>
              <li style="background-color: #cc1b47;"><a href="#">805-305-2630</a></li>
            </ul>
          </div>
        </div>
      </nav>  
    </div>
  </header> 

`

1 个答案:

答案 0 :(得分:0)

检查此代码段..

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<header class="header">
  <div class="header-nav">
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
      <div class="container">
        <div class="navbar-header">
          <button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
          </button>
          <a id="header-logo" href="index.php" class="navbar-brand">
            <img class="margin-top" src="images/logo.jpg" alt="">
          </a>
        </div>
        <div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
          <ul class="nav navbar-nav style2 navbar-right">
            <li><a href="index.php">Home</a>
            </li>
            <li><a href="about-us.php">About Us</a>
            </li>
            <li><a href="gallery.php">Gallery</a>
            </li>
            <li><a href="contact.php">Contact</a>
            </li>
            <li style="background-color: #cc1b47;"><a href="#">805-305-2630</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</header>