在bootstrap

时间:2017-09-22 18:32:54

标签: jquery html5 css3 dropdown bootstrap-4

我在bootstrap的下拉菜单中遇到了一些麻烦,但我不知道发生了什么,我的代码有点基于bootstrap的文档,我搜索了另一个答案,但我找不到我的问题所以我会请你帮忙。

PS。我在专栏中做了它只是为了更好地组织它,但我尝试了身体上的另一个例子,它仍然无法正常工作。

我尝试添加ajax,jquery,将其移到头部,但没有任何效果,我该怎么办?

这是我的HTML代码:

<head>
    <meta charset="UTF-8">
    <title>Frigorifico</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="stilos.css">
</head>
<body>
    <header>
        <div class="container-fluid row form-inline">
            <h1 class="col-md-2">Frigorifico</h1>
            <nav class="col-md-9">
                    <ul class="nav justify-content-center">
                        <li class="nav-item col-md-3">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Proyectos Actuales</a>
                                <div class="dropdown-menu">
                                      <a class="dropdown-item" href="#">Proyectos Anteriores</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="#" disabled>Proyectos Actuales</a>
                                </div>
                        </li>
                        <li class="nav-item col-md-3">
                            <a class="nav-link" href="#">Cronograma Semanal</a>
                        </li>
                        <li class="nav-item col-md-3 dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Perfiles</a>
                                <div class="dropdown-menu">
                                      <a class="dropdown-item" href="#">Clientes</a>
                                      <a class="dropdown-item" href="#">Marcas</a>
                                      <a href="#" class="dropdown-item">HablaRangers</a>
                                </div>
                        </li>
                    </ul>
            </nav>
            <a href="#" class="col-md-1">Mi perfil</a>
        </div>  
    </header>



    <script src="bootstrap/js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

只需在bootstrap.js之前包含popper.js(必需),然后您就可以正常编写代码了 https://jsfiddle.net/tamvo/dog2chqs/

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>