Bootstrap 4 Dropdown Menu ne fonctionne pas ?

Question

Bootstrap 4 Dropdown Menu ne fonctionne pas ?

Demandé el 3 de Septembre, 2017: Quand la question a-t-elle été
53066 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai copié l'exemple officiel de Bootstrap 4 pour les menus déroulants mais cela ne fonctionne pas, c'est-à-dire que rien ne descend.

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdown01">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

Demandé el 3 de Septembre, 2017 par komodoedit

2 votes

Travailler pour moi jsbin.com/bumeqopuwu/edit?html,output .. Avez-vous inclus la librairie correctement ?

Commenté el 3 de Septembre, 2017 par Arup Rakshit

0 votes

Oui j'ai inclus bootstrap.css, jquery.js, et bootstrap.js

Commenté el 3 de Septembre, 2017 par komodoedit

0 votes

Quelle version de bootstrap 4 incluez-vous (bootstrap.js, css) ?

Commenté el 5 de Septembre, 2017 par Martin Lindgren

Answer 1

5 Réponses

Answer 2

89voto

moidol Points 694

Edit : Au cas où quelqu'un d'autre aurait ce problème, je pense que la solution pour OP était qu'il n'avait pas importé popper.js .

Vérifiez que jQuery et tous les composants Bootstrap pertinents sont présents. Vérifiez également la console et assurez-vous qu'il n'y a pas d'erreurs.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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>
<-- Always remember to call the above files first before calling the bootstrap.min.js file -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

Répondu el 3 de Septembre, 2017 par moidol (694 Points )

0 votes

En utilisant le paquet nuget de Bootstrap 4, je faisais référence à Scripts/popper.js au lieu de Scripts/umd/poopper.js . Le premier a un export sur la dernière ligne qui créait une erreur dans Chrome.

Commenté el 30 de Mars, 2018 par xr280xr

0 votes

@moidol Je suis également confronté au même problème mais seulement au premier clic. J'ai un projet angular 10 et la balise angular.json script ressemble à ceci "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

Commenté el 17 de Décembre, 2020 par GKhedekar

Answer 3

17voto

Mohsin Mahmood Points 655

Essayez d'ajouter ces lignes à la fin du fichier

<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Répondu el 1 de Mars, 2018 par Mohsin Mahmood (655 Points )

0 votes

Si c'est le cas, pensez-vous que c'est webpack qui cause le problème ? Ce site est la branche où j'ai le même problème. Il semble que lorsque je lance le site dans VS, la fonctionnalité bootstrap jquery n'est pas activée même si les styles le sont.

Commenté el 2 de Juin, 2018 par Justin Capalbo

Answer 4

4voto

José Lugo Points 91

En supposant que les bibliothèques Bootstrap et Popper ont été installées à l'aide du gestionnaire de paquets Nuget, pour une application Web utilisant Visual Studio, dans le fichier de la page principale (Site.Master), juste en dessous du début de la balise body, incluez la référence à popper.min.js en tapant :

<script src="Scripts/umd/popper.min.js"></script>

Voici une image pour mieux montrer l'emplacement :

Notez que la référence de la bibliothèque popper à ajouter doit être celle qui se trouve à l'intérieur de umd et non celui qui se trouve en dehors du dossier Scripts.

Cela devrait régler le problème.

Répondu el 13 de Juillet, 2018 par José Lugo (91 Points )

Answer 5

2voto

Suleman Points 313

C'est un problème avec popper.js dossier. Ce que j'ai trouvé sur le site officiel, c'est que les fichiers bundle incluent popper en lui-même mais pas jquery. J'ai réussi à le corriger en ajoutant un lien vers ces fichiers :

bootstrap.bundle.js
bootstrap.bundle.min.js

J'ai retiré popper.js cependant, puisqu'il est inclus dans le fichier groupé.

Répondu el 25 de Février, 2018 par Suleman (313 Points )

0 votes

Vous devez appeler ces fichiers avant votre bootstrap.js appelé.

Commenté el 15 de Mars, 2018 par Abdu Rahiman

0 votes

Vous avez résolu mon problème après avoir beaucoup cherché sur Internet. Il me manquait popper.js

Commenté el 7 de Juin, 2019 par geekandglitter

Answer 6

1voto

ogbeh Points 38

Assurez-vous d'inclure le CSS de Bootstrap soit par l'intermédiaire du fichier Bootstrap CDN ou le télécharger et le lier localement

Répondu el 3 de Septembre, 2017 par ogbeh (38 Points )

0 votes

Bootstrap.css est inclus, les autres composants fonctionnent.

Commenté el 3 de Septembre, 2017 par komodoedit

Bootstrap 4 Dropdown Menu ne fonctionne pas ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Bootstrap 4 Dropdown Menu ne fonctionne pas ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: