3

我正在引导我迈出第一步。我基本上是自己重新创建了一个模板。它工作正常，但下拉菜单（在导航栏中）不起作用。

我很困惑，因为：

1) 过渡到移动模式工作正常。它的导航菜单也可以正常工作。

2）我已经包含了我下载的每个文件，我认为它就像一个文件没有被包含一样。

3）由于我认为我做错了什么，我直接从网站复制了这部分 HTML，但它仍然无法正常工作。

这是整个源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
       <link href="css/bootstrap.css" rel="stylesheet">
       <link href="css/bootstrap.min.css" rel="stylesheet">     
      <script src="../assets/js/html5shiv.js"></script>     

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

     <div class="navbar navbar-fixed-top asd">
      <div class="navbar-inner asd">
        <div class="container asd">
          <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="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav asd">
              <li ><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

      <h1>Title</h1>
      <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>  

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
4

2 回答 2

2

您需要在文件中包含 bootstrap-dropdown.js：http: //twitter.github.io/bootstrap/components.html#dropdowns

将此添加到底部的脚本中（在包含 jquery 之后）：

 <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>

编辑：重要

问题是您同时包含 bootstrap.js 和 bootstrap.min.js。这里遇到了类似的问题（这是我最初发现的地方）： 无法同时使用 bootstrap.min.js 和 bootstrap-dropdown.js

于 2013-07-22T17:26:51.510 回答
1

删除重复link的和script行后（您不必同时导入普通文件和最小化文件，例如js/bootstrap.jsand js/bootstrap.min.js），我已经测试了您的文件，但找不到错误。

因此，我建议您检查所有路径，因为缺少某些东西（可能bootstrap.js）：使用 Chrome 控制台或 FireBug 来查看您的环境中没有加载哪些资源，并尽可能将相对路径转换为绝对路径（例如/js/bootstrap.min.js）避免常见的文件导入陷阱。

PS：我假设您已经获得了 Bootstrap 的完整最新稳定版本，而不是自定义版本。

于 2013-07-22T17:47:13.493 回答