2014-02-24 260 views
1

我想讓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> 

回答

0

只需升級到引導程序v3.1.1使問題消失。