Question

我有点“麻烦”。我似乎无法使用此下拉菜单，但我已阅读并阅读，找不到解决方案。它只是不执行任何操作，不会下拉菜单。如果有人可以给我一点帮助，我会很高兴。

<div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Quem Sou?</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Exercício 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Exercício 2</a>
            </li>
            <li class="nav-item dropdown">
               <button class="btn nav-item dropdown-toggle" id="dropdownMenuButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   Dropdown
               </button>
               <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                   <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>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Exercício 3</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>

编辑：这是我的标题，因为你们所有人都在指使我获得链接

<head>
    <meta charset="UTF-8">
    <link href="styles.css" type="text/css" rel="stylesheet">
    <title>Ana Rodrigues</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Just+Another+Hand" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

Answer 1

看看这个网站，您会发现问题： https://getbootstrap.com/docs/4.0/components/dropdowns/
不要忘记在标题中添加引导程序，否则您可能会忘记下载引导程序文件，然后使用代码。另外，如果您在标题中使用互联网，则必须连接到互联网。

Answer 2

您是否将Bootstrap JS和jQuery导入到您的项目中？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>

Answer 3

请确保包含所有使所有引导程序组件正常运行所需的Javascript文件，就像@saeed所说的那样，您会在链接上找到以下内容：

“下拉列表基于第三方库Popper.js构建，该库提供动态定位和视口检测。确保在Bootstrap JavaScript之前包含popper.min.js或使用bootstrap.bundle.min.js / bootstrap.bundle包含Popper.js的.js。尽管不需要动态定位，但Popper.js并不用于在导航栏中定位下拉列表。

如果您要从源代码构建JavaScript，则需要util.js。 “

编辑：

您确定要包含jquery JS文件吗？

Bootstrap下拉菜单没有下拉

3 个答案: