引导程序的崩溃无效

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). 此代码必须在调整浏览器窗口大小时折叠列表项，但在任何浏览器（FF，Chrome或IE）中均不起作用。

thanx in advance. 提前谢谢。

Answer 1

The right HTML wasn't being used to make the nav bar responsive. 没有使用正确的HTML来使导航栏响应。

I used the code from http://twitter.github.io/bootstrap/components.html#navs , and made: 我使用了http://twitter.github.io/bootstrap/components.html#navs中的代码，并制作了：

<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. 只要链接了必要的JS / CSS，就可以实现所需的行为。

Working code here: http://codepen.io/hwg/pen/gFLfz (FF,Chrome Only?) 此处的工作代码： http : //codepen.io/hwg/pen/gFLfz （仅适用于FF，Chrome吗？）

or here: http://www.bootply.com/65033 (IE also) 或这里： http : //www.bootply.com/65033 （IE也是如此）

Answer 2

There is some mistake in your html .. 您的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>

引导程序的崩溃无效

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-06-20 10:09:40

解决方案2
0 2013-06-20 10:09:02

引导程序的崩溃无效

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-06-20 10:09:40

解决方案2 0 2013-06-20 10:09:02

解决方案1
1 已采纳 2013-06-20 10:09:40

解决方案2
0 2013-06-20 10:09:02