Question

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

导航栏未正确折叠（调整浏览器大小时）
当点击导航栏内的菜单项时，导航栏消失（以铬曲面显示）
导航栏隐藏了每个部分的顶部

请注意，我也试图让导航栏坚持到顶部。通过查看一些所谓的线程以及引导站点本身已经尝试了这种努力。

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

Answer 1

只需升级到bootstrap v3.1.1就可以解决问题。

bootstrap navbar不工作

1 个答案: