bootstrap导航栏不工作

我想让boostrap导航栏工作，但它似乎没有按预期工作。这里有一些不正确的行为。bootstrap导航栏不工作

导航栏不正确（调整时，浏览器）
折叠在导航栏里面的菜单项点击时，导航栏消失（铬）
导航栏隐藏各部分

请注意，我也试图使导航栏顶部。通过查看一些如此的线程以及引导程序站点本身，尝试了这种努力。

<html> 
    <head> 
    <title>Test Navbar</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> 
    <style> 
     .content { 
      margin: 20px; 
      width: 500px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="navbar navbar-fixed-top navbar-inverse" id="navbar-wrapper" role="navigation"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <!-- Be sure to leave the brand out there if you want it shown --> 
      <a class="brand" href="#">MySite</a> 

      <!-- Everything you want hidden at 940px or less, place within here --> 
      <div class="nav-collapse collapse"> 
      <!-- .nav, .navbar-search, .navbar-form, etc --> 
      <ul class="nav"> 
       <!-- TODO: make class="active" --> 
       <li><a class="navbar-font" href="#">Home</a></li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Catagories<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#section1">Section 1</a></li> 
        <li><a href="#section2">Section 2</a></li> 
        <li><a href="#section3">Section 3</a></li> 
        <li><a href="#section4">Section 4</a></li> 
        <li><a href="#section5">Section 5</a></li> 
        <li><a href="#section6">Section 6</a></li> 
        <li><a href="#section7">Section 7</a></li> 
        <li><a href="#section9">Section 8</a></li> 
        <li><a href="#section9">Section 9</a></li> 
       </ul> 
       </li> 
      </ul> 
      <form class="navbar-search pull-right" action=""> 
       <input type="text" class="search-query span2" placeholder="Search"> 
      </form> 
      <ul class="nav pull-right"> 
       <li class="divider-vertical"></li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Profile</a></li> 
        <li><a href="#">Payment</a></li> 
        <li><a href="#">Help</a></li> 
        <li class="divider"></li> 
        <li><a href="logout">Logout</a></li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    <section id="section1" class="content"> 
    <h2>section 1</h2> 
    <!-- actual content omitted --> 
    </section> 
    <!-- there are 9 sections --> 
    <section id="section9" class="content"> 
    <h2>section 9</h2> 
    <!-- actual content omitted --> 
    </section> 
    <script src="js/jquery-1.11.0.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
    </html>

来源

2014-02-24 Jane Wayne

只需升级到引导程序v3.1.1使问题消失。

来源

2014-03-06 16:46:32

bootstrap导航栏不工作

回答

相关问题