bootstrap's collapse doesn't work
Question
i have written this code using bootstrap to use the collapse-menu.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Up and Running with Bootstrap</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Roux Academy Conference</a>
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
this code has to collapse the list items on resizing the browser window but it doesnt work in any of the browser(FF, Chrome or IE).
thanx in advance.
2 answers
solution1
1 ACCPTED 2013-06-20 10:09:40
The right HTML wasn't being used to make the nav bar responsive.
I used the code from http://twitter.github.io/bootstrap/components.html#navs , and made:
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Roux Academy Conference</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</div>
</div>
</nav>
This makes the desired behaviour as long as the the necessary JS/CSS is linked.
Working code here: http://codepen.io/hwg/pen/gFLfz (FF,Chrome Only?)
or here: http://www.bootply.com/65033 (IE also)
solution2
0 2013-06-20 10:09:02
There is some mistake in your html ..
add this for collapse menu:
<div class="nav-collapse collapse">
add this for collapse menu button
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
Please Try this:
<head >
<title></title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<a class="brand" href="#">Roux Academy Conference</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.