Question

我正试图在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包含所有插件。

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

Answer 1

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

请注意，我添加了

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

以下是如何将其包含在complete nav bar

中的示例祝你好运！

Answer 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>

Answer 3

来自docs：

仅查看下拉菜单，这是必需的HTML。您需要在.dropdown中包含下拉列表的触发器和下拉菜单，或者声明position：relative;的另一个元素。然后只需创建菜单。

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

Answer 4

尝试使用父级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可以解决这个问题。祝你好运！

Answer 5

在我的情况下，我发现b'TABLE\r\n' b'0,1\r\n' b'"EXCEL"\r\n' b'VECTORS\r\n' b'0,8\r\n' b'""\r\n' b'TUPLES\r\n' b'0,3\r\n' b'""\r\n' b'DATA\r\n' b'0,0\r\n' . . . b'"Windows Media Video"\r\n' b'-1,0\r\n' b'EOD\r\n'引导类已将top属性设置为：.dropdown-menu，这导致下拉列表显示在视口外部。我确实用另一个类覆盖了最高值，现在正在工作。

下拉菜单未显示在Bootstrap中

5 个答案: