Bootstrap 中未显示下拉菜单答案

【问题标题】：Dropdown menu not showing in BootstrapBootstrap 中未显示下拉菜单
【发布时间】：2026-01-13 16:50:01
【问题描述】：

我正在尝试在 Bootstrap 中获取 a basic dropdown menu：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <div class="dropdown">
      <!-- Link or button to toggle dropdown -->
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

  </body>
</html>

但是，什么都没有出现。我知道本地 CSS 和 JS 文件被正确引用。据我了解，默认的JS包含所有插件。

编辑：感谢大家的反馈。我只能添加，以防人们发现自己处于与我相同的情况，在复制和粘贴 sn-ps 之前在教程中移动 further down。

【问题讨论】：

你能把它放在一个 jsfiddle 里吗？
我以前从未使用过 jsfiddle，所以我不确定是否一切正常，但here 确实如此。

标签： twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

我认为您的代码基本上不错，但是您缺少触发下拉菜单的链接。见jsFiddle

注意我添加了

<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

这是一个如何将其包含在 complete nav bar 中的示例

祝你好运！

【讨论】：

非常感谢...尝试学习 Bootstrap 是一个令人沮丧的企业。我希望官方的 sn-ps 是独立的，但是，唉，我猜他们希望你知道你在做什么。任何关于如何获得最少的 HTML/CSS/JS 知识以便正确利用 Bootstrap 的建议都将不胜感激。再次感谢。
我知道您所说的 sn-ps 的使用并不总是像您想象的那么简单。我发现自己检查了很多 HTML 和 CSS 源代码来填补空白。我开始欣赏样式和脚手架工作背后的逻辑，所以随着时间的推移，一切都会变得更容易；）

【解决方案2】：

请特别注意代码中的注释<-- Link or button to toggle dropdown -->。您需要放置一个带有 data-toggle="dropdown" 属性的链接或按钮来激活下拉菜单。

试试这个：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->

  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default" data-toggle="dropdown"> Dropdown Test </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

【讨论】：

感谢您提供如此清晰的示例。它告诉我几个按钮/链接可以触发相同的下拉菜单，以及一些关于 Bootstrap 文档的特质！

【解决方案3】：

尝试使用父 ul 和 li 来包装您在上面发布的 ul，而不是 div。例如，

    <ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
       <li class= "dropdown" data-dropdown="dropdown">
         <a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
          <b class="caret dropdown-toggle"></b>
         </a>
         <ul class="dropdown-menu" >
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>
      </li>
    </ul>

我不认为 tab-index 是必要的，因为 bootstrap css 会处理这个问题。祝你好运！

【讨论】：

谢谢！冒着在 cmets 中抛出许多开放式问题的风险……您如何着手建立对 Bootstrap 使用的理解？除了官方文档，还有什么推荐的资源吗？（tabindex 设置是从官方 sn-p 逐字复制的。）
创建和试验引导类总是最好的方法，但是当你不知所措时，试着检查一些已经使用 twitter 引导的现有网站的代码。

【解决方案4】：

来自docs：

只看下拉菜单，这里是所需的 HTML。您需要将下拉菜单的触发器和下拉菜单包装在 .dropdown 或另一个声明 position: relative; 的元素中。然后创建菜单。

因此，您可能需要将 dropdown 类的 CSS 设置为（至少）position: relative;。此外，默认情况下，.dropdown-menu 上还有一个 display:none。也尝试覆盖它。

【讨论】：

谢谢，但我相信提供的示例确实需要 .dropdown 包装，不是吗？
好吧，默认引导 css 中没有 .dropdown 类，所以你必须这样做。
再次感谢，但这并不能解决问题。无论如何，我的（未缩小的）bootstrap.css 在第 2840 行和第 2843 行之间有声明 .dropup, .dropdown { position: relative; }。我手动添加了您的建议，但无济于事。
默认情况下，您在.dropdown-menu 上有一个display:none。尝试覆盖它。
再次感谢，米哈。我认为a few sections down 有一个更完整的示例来说明如何使用下拉菜单。我知道我是一个脾气暴躁的老人，但是……这种零碎的方法在应用于技术产品时会令人不安。我想在尝试这些东西之前应该阅读所有文档。此外，我的 CSS 知识远远落后于您，但正是我希望对 CSS 的非常粗略了解可以让我使用 Bootstrap 而不是调整 CSS 本身！哦，好吧...再次感谢！

【解决方案5】：

在我的例子中，我发现.dropdown-menu 引导类将顶部属性设置为：top: 100%，这导致下拉菜单显示在视口之外。我确实用另一个类覆盖了最高值，现在正在工作。

【讨论】：