Question

我正在用Symfony4，Bootstrap4和Webpack初始化一个项目。

我已经复制了Bootstrap中的导航栏代码以在我的代码上对其进行测试：

{% extends 'base.html.twig' %}

{% block body %}
        <nav class="navbar navbar-expand-lg navbar-light bg-light">

            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</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">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                    </div>
                </li>

        </div>
    </nav>
{% endblock %}

{% block javascripts %}

{% endblock %}

我以前已经运行过那些先前的命令：

yarn add bootstrap --dev

和

添加纱线jquery popper.js --dev

我所有的代码都扩展了我的基本布局

<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ asset("build/app.css") }}"/>
    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block stylesheets %}
    {% endblock %}
</head>
<body>

{% block body %}{% endblock %}


{% block javascripts %}
    <script src="{{ asset("build/app.js") }}"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>

{% endblock %}
</body>

但是当我运行我的网站时，下拉菜单不起作用。...控制台中没有任何问题...

我想我错过了一些东西，但不知道为什么

Bootstrap4和导航栏没有下拉列表

0 个答案: