12

我正在尝试在 Bootstrap中获得一个基本的下拉菜单：

<!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 包含所有插件。

编辑：感谢大家的反馈。我只能添加，以防人们发现自己处于与我相同的情况，在复制和粘贴片段之前在教程中进一步向下移动。

4

5 回答 5

17

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

请注意，我添加了 

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

这是一个如何将其包含在完整导航栏中的示例

祝你好运！

于 2012-12-26T13:28:08.897 回答
4

请特别注意<-- 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>

于 2012-12-27T18:34:11.660 回答
2

从文档：

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

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

于 2012-12-24T15:48:03.020 回答
2

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

    <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 会处理这个问题。祝你好运！

于 2012-12-26T06:52:22.583 回答
1

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

于 2017-07-07T04:02:34.887 回答