引导崩溃不起作用答案

【问题标题】：bootstrap's collapse doesn't work引导崩溃不起作用
【发布时间】：2013-06-17 01:11:46
【问题描述】：

我使用引导程序编写了这段代码以使用折叠菜单。

<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）中都不起作用。

提前感谢。

【问题讨论】：

bootstrap.js 是否包含折叠/转换 Bootstrap JavaScript？我知道使用该网站你可以选择你想要的模块。也许你没有加载你需要的所有 JS？
你想要什么样的效果？像这样？- http://codepen.io/hwg/pen/Dnday 这使用 bootstrapcdn.com
是的，它包含折叠/转换 Bootstrap javascript
或者使用来自here 的一些代码，您的代码稍作更改会生成：codepen.io/hwg/pen/gFLfz，这是响应式的。
您似乎没有使用折叠菜单的代码。它应该看起来像这样：bootply.com/65023

标签： html twitter-bootstrap menu collapse

【解决方案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）

【讨论】：

但是按钮是可见的，当我在浏览器中单击它时没有任何反应。它在你提供的链接中运行良好。
或者我猜我的浏览器中的 js 存在一些问题。它在所有浏览器中都已启用，但它仅适用于网站而不适用于代码。
我可以做些什么来解决与我的计算机中的 javascript 相关的错误，因为这几天以来它一直在困扰我..即使是显示警报框的简单代码也不起作用
@PrathamMehta 我认为现在可以了 - 请参阅 bootply.com 链接。
感谢您的所有帮助@harley

【解决方案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>

【讨论】：