Bootstrap 中未显示下拉菜单Bootstrap 101 模板

Question

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

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

Answer 1

jsFiddle

请注意，我添加了

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

这是如何将其包含在

完整导航栏中的示例

祝你好运！

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

文档

：

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

因此，您可能需要为您的

dropdown

类设置 CSS（至少）具有

position: relative;

。默认情况下，您在

display:none

上还有一个

.dropdown-menu

。也尝试覆盖它。

Answer 4

<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

.dropdown-menu

引导类已将 top 属性设置为：

top: 100%

，这导致下拉列表显示在视口之外。我确实用另一个类覆盖了最高值，现在正在工作。

Bootstrap 中未显示下拉菜单Bootstrap 101 模板

问题描述投票：0回答：6

6个回答

最新问题

Bootstrap 中未显示下拉菜单Bootstrap 101 模板

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6