Question

我正在尝试使用我的网站上的bootstrap创建一个导航栏。我想要一个下拉框，但是当我点击下拉列表时它什么也没做。我相信早些时候我有这个问题或类似的东西，它要求我使用javascript但我还没有尝试过类似的东西。

这是我的代码：

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Options <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        <!--                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Options <span class="caret"></span></a>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>-->
                    </li>

Answer 1

您需要在代码中的bootstrap.min.js文件后加载jquery.min.js。如果您不加载javascript文件，则无法访问脚本中的所有效果。

Answer 2

我链接了文件，这是我头脑中的代码：

        <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

Answer 3

这对我有用

<html>
<head>

    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="Content/bootstrap.min.css" rel="stylesheet">
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="Scripts/jquery-2.1.3.min.js"></script>

    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Options <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </div>
    </div>
    <footer class="container">
        ...
    </footer>
</body>
</html>

Bootstrap Navbar下拉错误

3 个答案: