引导程序的崩溃无效

Question

我已经使用引导程序编写了此代码，以使用折叠菜单。

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

此代码必须在调整浏览器窗口大小时折叠列表项，但在任何浏览器（FF，Chrome或IE）中均不起作用。

提前谢谢。

Answer 1

没有使用正确的HTML来使导航栏响应。

我使用了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>

只要链接了必要的JS / CSS，就可以实现所需的行为。

此处的工作代码： http : //codepen.io/hwg/pen/gFLfz （仅适用于FF，Chrome吗？）

或这里： http : //www.bootply.com/65033 （IE也是如此）

Answer 2

您的html中有一些错误。

将其添加到折叠菜单中：

<div class="nav-collapse collapse">

添加此按钮以折叠菜单按钮

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

请尝试以下方法：

<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