Twitter bootstrap 下拉菜单在导航栏中未按预期工作_Twitter Bootstrap_Drop Down Menu_Navigation_Bootstrap 4

Twitter bootstrap 下拉菜单在导航栏中未按预期工作

twitter-bootstrap drop-down-menu navigation bootstrap-4

Twitter bootstrap 下拉菜单在导航栏中未按预期工作,twitter-bootstrap,drop-down-menu,navigation,bootstrap-4,Twitter Bootstrap,Drop Down Menu,Navigation,Bootstrap 4,我网站上的下拉菜单就是不起作用，我不明白为什么。我浏览了这个网站和其他网站，并重新阅读了引导文档，但我不知道为什么它不起作用。他们不会放弃。我知道它们正在被单击，因为当我单击它们时，哈希符号将出现在URL中，但不会出现拖放动画下面是我的代码，带有头部和导航栏其他人能看出哪里出了问题吗 <head> <title>Scott's Website</title> <link rel="stylesheet" type="text/css"

我网站上的下拉菜单就是不起作用，我不明白为什么。我浏览了这个网站和其他网站，并重新阅读了引导文档，但我不知道为什么它不起作用。他们不会放弃。我知道它们正在被单击，因为当我单击它们时，哈希符号将出现在URL中，但不会出现拖放动画

下面是我的代码，带有头部和导航栏

其他人能看出哪里出了问题吗

<head>
    <title>Scott's Website</title>
    <link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <script type="text/javascript" src="styles/bootstrap/css/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.js"></script>
</head>

<body>
    <div class="container-fluid bg-dark">
        <div class="container bg-dark">
            <div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
                <div class="col-9">
                    <h1>Scott McMullan</h1>
                    <div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
                        <div class="col-9">
                            <h7 class="font-weight-light">Studying full time at Griffith University.</h7>
                        </div>
                    </div>
                    <div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
                        <div class="col">
                            <h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science & Artificial Intelligence.</h7>
                        </div>
                    </div>

                    <hr/>

                    <div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
                        <nav class="navbar navbar-expand-lg navbar-dark">
                            <a class="navbar-brand" href="#">
                                <img src="icon.jpg" width="30" height="30" alt="mannaz" />
                            </a>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="navbar-nav mr-auto">
                                    <li class="nav-item">
                                        <a class="nav-link font-weight-bold" href="index.html">Home</a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Experience
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" href="#">Professional</a>
                                            <a class="dropdown-item" href="#">Academic</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Academic Course Breakdown</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Projects
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" href="#">Professional</a>
                                            <a class="dropdown-item" href="#">Academic</a>
                                            <a class="dropdown-item" href="#">Personal</a>
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="contact.html">Contact</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>

看起来您必须再次阅读引导文档：

您正在使用的引导下拉列表需要popper.js 可在以下介绍中找到：快速入门>JS

引导文档非常丰富。通常情况下，这是好的

我自己也学到了一些新东西： PopperJS实际上与bootstrap-4捆绑在一起。它只是隐藏在bootstrap.bundle.js中

不过你得把它包括进去。正如我在上次回答中所说：都在文件里

您的下拉列表不起作用的原因是您没有加载popper.js。所有弹出和下拉的内容都需要该文件

另外，尽可能保持HTML的有效性始终是一个好主意，因为您可以管理您在此处发布的无效代码。建议在底部加载js文件，而不是在头部加载

以下是工作代码单击“运行代码片段”按钮并展开到全屏以验证其是否工作：

斯科特·麦克马伦在格里菲斯大学学习全日制。攻读计算机科学学士学位，主修数据科学和；人工智能

其他人说的不是真的，我是从本地文件加载popper.js的。但是，没有加载的是jquery文件，因为我在本地拥有所有内容

修复很简单，从下载jquery源代码并在本地将其与我的HTML链接。

我明白了，谢谢。为什么我下载的文件里没有？我在本地电脑上安装了bootstrap。因为我没有打包它，所以我不确定，但我要说的是，这些是可选的，第三方依赖项不是由bootstrap团队管理的。不过，您可以通过快速的web搜索找到下载的源代码。很抱歉这么不方便，但您说您自己已经阅读了文档。既然它就在那里，我觉得没有必要重新发明轮子。我把它包括在我的资料中，但这仍然没有帮助。