Twitter bootstrap 引导导航栏不工作_Twitter Bootstrap_Navbar_Sticky

Twitter bootstrap 引导导航栏不工作

twitter-bootstrap

Twitter bootstrap 引导导航栏不工作,twitter-bootstrap,navbar,sticky,Twitter Bootstrap,Navbar,Sticky,我正试图让助推器导航栏工作，但它似乎没有按预期工作。下面是一些不正确的行为调整浏览器大小时，导航栏无法正确折叠当单击导航栏内的菜单项时，导航栏将在chrome中消失导航栏隐藏每个部分的顶部请注意，我还试图使导航栏粘贴到顶部。通过查看一些so线程以及引导站点本身，尝试了这项工作 <html> <head> <title>Test Navbar</title> <link href="css/bootstr

我正试图让助推器导航栏工作，但它似乎没有按预期工作。下面是一些不正确的行为

调整浏览器大小时，导航栏无法正确折叠当单击导航栏内的菜单项时，导航栏将在chrome中消失导航栏隐藏每个部分的顶部请注意，我还试图使导航栏粘贴到顶部。通过查看一些so线程以及引导站点本身，尝试了这项工作

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

只需升级到bootstrap v3.1.1，问题就迎刃而解了。

popper js在此缺失。尝试添加这个popper.js CDN并检查