引导程序中的按钮无法正常工作

Question

我一直在尝试使用bootstrap（4）创建一个网站。 我被困在创建带有下拉列表的菜单。 我无法使其正常工作，我什至尝试复制文档的确切代码进行引导，但仍然无法正常工作。 我已经检查并重新检查了引导css和js的路径，我真的不知道如何使其工作。

同时，我可以使用引导程序在下拉列表中创建下拉列表吗？ 它用于菜单目的。

引导文档，w3schools和其他网站。 即使复制精确的代码也没关系，按钮不起作用

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-grid.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-reboot.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-reboot.min.css">

<title>Animal World</title>

<style>

</style>

<img src="animalworld.jpg" class="img-fluid w-100" alt="Animal">

 <div class="dropdown fixed-top bg-faded ">
    <button class="btn dropdown-toggle" type="button" id="DropDownAnimals" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Animals
    </button>
    <div class="dropdown-menu" aria-labelledby="DropDownAnimals">
        <button class="dropdown-item" >Dogs</button>
        <button class="dropdown-item" type="button">Horses</button>
        <button class="dropdown-item" type="button">Birds</button>
    </div>
</div> 

<!--<nav id="navbar" class="navbar fixed-top navbar-collapse-md navbar-light bg-faded">
    <a class="navbar-brand" href="#">Animal World</a>

    <button class="navbar-toggler-right" type="button" data-toggle="collapse" data-target="#MainMenu" aria-controls="MainMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="MainMenu" class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Animals</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Stuff</a>
            </li>
        </ul>
    </div>-->






<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


<script>
</script>

在上面的代码中，对于相似的按钮，有两个不同的代码部分。 首先根本不起作用。 第二个按钮可以，但是以一种方式可使按钮向右移动，而其他三个按钮显示在左侧。 根本无法更改。 我希望下拉菜单根据文档直接位于按钮下方。

Answer 1

我认为您输入的脚本顺序错误。 尝试先放置jquery脚本标记，然后放置popper脚本，然后放置Bootstrap脚本。

为了回答您的附属问题，绝对有可能将下拉列表放入下拉列表中。

引导程序中的按钮无法正常工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-13 14:34:40

引导程序中的按钮无法正常工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-13 14:34:40

解决方案1
1 已采纳 2019-08-13 14:34:40