Bootstrap下拉菜单无效

Question

Hello my bootstrap nav is not dropping down into different sections like I've seen it in examples on multiple sites. 你好我的bootstrap nav没有下降到不同的部分，就像我在多个站点的示例中看到的那样。 I've tried moving things around but to no avail. 我试过搬东西但无济于事。 I feel like I'm missing something very simple though so any input would be much obliged :D 我觉得我错过了一些非常简单的东西，所以任何输入都会有很大的不足：D

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="/styles/style.css">
    <link rel=stylesheet type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Personal Portfolio</title>
</head>

<body>

    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>

    <footer>
    </footer>

</body>

</html>

AN EXAMPLE :D 例子：D

https://jsfiddle.net/pajdnLwv/ https://jsfiddle.net/pajdnLwv/

Answer 1

You missed loading the following JS libraries to make the dropdown menu work: 您错过了加载以下JS库以使下拉菜单工作：

jQuery library (to get the Bootstrap JS work) jQuery库（获取Bootstrap JS工作）
Bootstrap JS (to get the dropdown work) Bootstrap JS（获取下拉工作）

See a working solution: JSFiddle 查看有效的解决方案： JSFiddle

Add this to your <head> to get it working: 将其添加到<head>以使其正常工作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

You just need to include the javascript files in your head tag. 您只需要在头标记中包含javascript文件即可。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

You can try it here 你可以在这里试试

Answer 3

Updated answer for anyone using Bootstrap 4 . 使用Bootstrap 4的任何人的更新答案 。

Please note that in Bootstrap 4, dropdown menus depend on the popper.js library as well (the umd version specifically). 请注意，在Bootstrap 4中，下拉菜单也取决于popper.js库（具体是umd版本）。 So to get them to work, you need jquery, popper, and bootstrap loaded, in that order. 因此，要使它们工作，您需要按顺序加载jquery，popper和bootstrap。 As of today, that looks like this: 截至今天，看起来像这样：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Source: Bootstrap Docs > Introduction > Quick Start 来源： Bootstrap文档>简介>快速入门

Bootstrap下拉菜单无效

问题描述

3 个解决方案

解决方案1
6 已采纳 2016-03-06 15:58:47

解决方案2
3 2016-03-06 15:59:39

解决方案3
0 2017-09-04 15:52:52

Bootstrap下拉菜单无效

问题描述

3 个解决方案

解决方案1 6 已采纳 2016-03-06 15:58:47

解决方案2 3 2016-03-06 15:59:39

解决方案3 0 2017-09-04 15:52:52

解决方案1
6 已采纳 2016-03-06 15:58:47

解决方案2
3 2016-03-06 15:59:39

解决方案3
0 2017-09-04 15:52:52