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>