Le Menu déroulant Bootstrap 4 ne fonctionne pas?

j'ai copié le officiel Bootstrap 4 exemple de menus déroulants, mais il ne fonctionne pas, c'est que rien n'est tombé.

<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>
23
demandé sur Martin Lindgren 2017-09-03 22:00:12

5 réponses

Edit: au cas où quelqu'un d'autre aurait ce problème, je crois 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 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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
28
répondu moidol 2017-09-18 04:17:40

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>
4
répondu mohsinmdl 2018-03-01 20:37:54

assurez-vous d'inclure le CSS Bootstrap via le Bootstrap CDN ou téléchargez - le et liez-le localement

1
répondu ogbeh 2017-09-03 19:09:13

C'est un problème avec popper.js fichier. Ce que j'ai trouvé sur le site officiel était que les fichiers package incluent popper en soi mais pas jquery. J'ai réussi à le résoudre par ajout d'un lien vers ces fichiers:

bootstrap.bundle.js

bootstrap.bundle.min.js

j'ai enlevé popper.js cependant puisqu'il entre dans le fichier bundle.

1
répondu Suleman 2018-02-25 13:17:35

en supposant que les bibliothèques Bootstrap et Popper ont été installées en utilisant Nuget package manager, pour une application web en utilisant Visual Studio, dans le fichier de la page principale (Site.Master), juste en dessous de l'endroit où l'étiquette de corps commence, inclure la référence à popper.min.js en tapant:

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

Voici une image pour mieux afficher l'emplacement:

enter image description here

notez que la référence de la bibliothèque popper à ajouter doit être celle à l'intérieur umd le dossier et pas celui à l'extérieur du dossier Scripts.

Cela devrait résoudre le problème.

1
répondu José Lugo 2018-07-31 21:16:50