Question

我试图通过引用它的示例在我的网站中使用Bootstrap，除了由于某种原因，它提供的下拉示例不起作用;它只显示一个空白页面。我做了什么，为了确保我没有遗漏任何东西，我去了Bootstrap网站，去定制，并确保我下载了所有可能的CSS / Javascript文件，确保包含所有可能的功能/功能。

以下是我正在尝试做的一个基本示例。

<html>
 <head>
  <title></title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href=".../assets/bs/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href=".../assets/bs/css/bootstrap.min.css">
 </head>
 <body>

  <div class="dropdown">
   <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
   </ul>
  </div>

  <!-- jQuery -->
  <script src=".../assets/js/jquery-2.1.0.min.js"></script>
  <!-- Bootstrap Javascript -->
  <script src=".../assets/bs/js/bootstrap.min.js"></script>

 </body>
</html>

该页面正在连接脚本，我通过Google Chrome的检查员确认了这一点。更令人困惑的是，我能够实现一些Bootstrap的功能，但不是全部，例如我可以使用它提供的图标创建按钮，但我无法创建下拉列表。

我已经研究过这个问题，但它提供的解决方案都没有解决它。有谁知道我错过了什么？

请尽快回复，非常感谢。

经过几次检查后，我应该澄清是的，我正在使用最新的Bootstrap，我应该提到我通过CodeIgniter显示页面，目前我仍然难以获得它工作，但我会继续努力，直到我。

感谢您的回复。

Answer 1

我尝试使用Bootply重新创建代码，

这是使用Bootstrap 2.3.1和jQuery 2.0.2

似乎工作正常。可能是因为你正在使用的jQuery版本

Demo here

修改

我注意到在您的代码中，您没有指明doctype。

这个在Bootstrap文档中说明：


HTML5 doctype

Bootstrap使用某些HTML元素和CSS   需要使用HTML5 doctype的属性。包括在   所有项目的开始。

来源：http://getbootstrap.com/css/#overview

<!DOCTYPE html> <html lang="en"> ... </html>

Answer 2

似乎Bootstrap教程与Bootstrap文件不完全兼容，在本例中是下拉列表。具体来说，提供的CSS文件无法通过网站提供的示例显示下拉菜单，因此教程需要更新或CSS文件。

目前，v2.3.2可以通过给出的示例显示下拉列表，可以像这样访问。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

另外通过参考其他示例，即使在使用v3.1.0时，我也能够在一定程度上使用此功能。

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">PHP</a></li>
        <li><a href="#">MySQL</a></li>
        <li class="divider"></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML5</a></li>
    </ul>
</div>

简而言之，CSS文件需要更新，或者教程需要更新。

非常感谢那些回答并协助我分配问题的人。

Answer 3

您可能正在使用旧版本的Bootstrap。

如果我没记错的话，你需要在旧版本中单独添加“下拉”javascript文件。

我会升级到2.3.1，找不到下拉列表javascript文件，并添加它。

2.3.1 docs可以在这里找到：

http://bootstrapdocs.com/v2.3.1/docs/

否则，您在Firebug / Chrome控制台窗口中看到了哪些错误？

尝试通过Dropdown使用Bootstrap

3 个答案: