Question

你好我的引导程序nav没有像我在多个站点的示例中看到的那样进入不同的部分。我试过搬东西但无济于事。我觉得我错过了一些非常简单的东西，所以任何输入都会有很大的不足：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>

示例：D

https://jsfiddle.net/pajdnLwv/

Answer 1

您错过了加载以下JS库以使下拉菜单正常工作：

jQuery库（使Bootstrap JS工作）
Bootstrap JS（获取下拉工作）

查看有效的解决方案：JSFiddle

将此添加到您的<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

您只需要在头标记中包含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>

您可以尝试here

Answer 3

使用 Bootstrap 4 的任何人

更新了答案。

请注意，在Bootstrap 4中，下拉菜单也取决于popper.js库（具体为umd版本）。因此，要使它们工作，您需要按顺序加载jquery，popper和bootstrap。截至今天，看起来像这样：

<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>

来源：Bootstrap Docs > Introduction > Quick Start

Bootstrap下拉菜单无效

3 个答案: