[Bootstrap 4.3] Menu navabar et sous menus

**Skunka** · 29/08/2019, 19h25

Salut !
Je me sert de bootstrap 4.3 pour réaliser un menu sur mon site mais j'ai un dropdown qui ne s'exécute pas. L'item 'Jeu' contient deux sous items 'Le sardonne' et 'Dementia' qui ont eux même des sous items:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
{% set util = app.session.get('util') %}
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{{ path('skunka_accueil') }}">
    <img src="/img/logo_navbar.png" alt"SP" width="30" height="30">
  </a>
 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
 
      <li class="nav-item">
        <a class="nav-link" href="{{ path('skunka_accueil') }}">Accueil</a>
      </li>
 
      {% if util.permission.id is same as(1)  %}
        <li class="nav-item"> 
          <a class="nav-link" href="{{ path('skunka_permission') }}">Permission</a>
        </li>
      {% endif %}
 
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Jeu
        </a>
 
        {% if util.permission.id is not same as(1) %}
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Le sardonne</a></li>
            <div class="dropdown-divider"></div>
            <li><a class="dropdown-item" href="#">Dementia</a></li>
          </ul>
        {% else %}
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item dropdown-toggle" href="#">Le sardonne</a></li>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Editer</a></li>
              </ul>
 
            <div class="dropdown-divider"></div>
            <li><a class="dropdown-item" href="#">Dementia</a></li>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Editer</a></li>
              </ul>
          </ul>
        {% endif %}
 
      </li>
 
      {% if util.permission.id is not same as(3) %}
        <li class="nav-item">
          <a class="nav-link" href="{{ path('skunka_amis') }}">Ami</a>
        </li>
      {% endif %}
 
    </ul>
    {{ render(controller('App\\Controller\\ConnexionController::index')) }}
 
  </div>
</nav>

Ce que j'ai actuellement:

Nom : navbar.JPG
Affichages : 467
Taille : 9,1 Ko

Le lien 'Jeu' ne se déroule pas.
Je me suis inspiré de la doc:

https://getbootstrap.com/docs/4.0/components/navbar/

Et j'importe bien bootstrap:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
 
        {# FONTAWESOME #}
        <script src="https://kit.fontawesome.com/0f5efe7cba.js"></script>
 
        {# BOOTSTRAP #}
        <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
        <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 
        <link href="/css/style.css" rel="stylesheet" type="text/css">
 
    </head>
    <body>
        {% include "header.html.twig" %}
        <div class="content"> {% block body %}{% endblock %}
            {% include "footer.html.twig" %}
        </div>
        {% include "javascript.html.twig" %}
    </body>
</html>