html - 如何在导航栏中输入下拉项

标签 html css drop-down-menu bootstrap-4 navbar

我创建了一个标题,里面有一个导航栏

我想要一个成为下拉菜单的元素。但是我不明白为什么没有出现我的元素。

我在链接上看到,这看起来很简单: https://getbootstrap.com/docs/4.0/components/navs/

带有下拉菜单的药丸

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>

  <header>

ITEC-EP

<div class="collapse navbar-collapse" id="navbarColor01">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="index.html">Applications<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="wiki.html">Wiki</a>
    </li>

    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>

  </ul>

</div>

我没有任何错误信息。 当我点击我的下拉菜单时,没有任何反应。内部元素没有出现。

我试图不使用 css,而只使用 bootstrap。我选择使用这个模板: https://bootswatch.com/materia/

我错了什么? 以后如何在 mozilla 的开发者模式下进行调试?

最佳答案

我想问题是没有安装正确的 javaScript 包。我第一次使用 Bootstrap 时有这个,我缺少 popper.js

关于html - 如何在导航栏中输入下拉项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56257545/

相关文章:

javascript - 如何将div放在其他div的后面

javascript - 如何使用 Angular js 将事件类放入 html 页面的特定 id/页脚?

css - Firefox 中的百分比 div 大小错误

javascript - 通过按键输入搜索元素的下拉菜单

CSS Div/Box 字体问题

html - 菜单/导航位置

html - CSS 类名 :not(:first-child) selector does not exclude the first child of it's classname

javascript - 为什么当我向下移动文本时,浏览器内部会出现另一个垂直滚动条?

html - 如何将子菜单添加到下拉菜单?

html - CSS3(下拉菜单)第二个子菜单没有出现