web-dev-qa-db-fra.com

Bootstrap 4 Le menu déroulant ne fonctionne pas?

J'ai copié l'exemple officiel Bootstrap 4 pour les menus déroulants, mais il ne fonctionne pas, rien n'est déroulé.

<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>
javascriptcsshtml5bootstrap-4
33
komodoedit

Edit: Si quelqu'un d'autre avait ce problème, je pense que la solution pour OP était de ne pas importer 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'erreur.

<!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>
51
moidol

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>
8
Mohsin Mahmood

En supposant que Bootstrap et les bibliothèques Popper ont été installés à l'aide du gestionnaire de packages Nuget, pour une application Web utilisant Visual Studio, dans le fichier de page maître (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 afficher l'emplacement:

enter image description here

Notez que la référence de la bibliothèque popper à ajouter doit être celle située dans le dossier umd et non celle située à l'extérieur du dossier Scripts.

Cela devrait résoudre le problème.

4
José Lugo

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

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

J'ai toutefois supprimé popper.js puisqu'il se trouve dans le fichier bundle.

2
Suleman

Ajouter ce code à votre jquery

  $('.dropdown').click(function(){

       $('.dropdown-menu').toggleClass('show');

   });
1
Dushyanth Kandiah

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

1
ogbeh

J'ai utilisé NuGet pour installer BootStrap 4. J'avais aussi des problèmes avec l'affichage de la liste déroulante au clic. Il a continué à générer une erreur dans jQuery sur ce que la console Chrome me disait.

J'avais à l'origine ce qui suit

<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />

 <%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>

Mais je l'ai changé pour utiliser la version fournie à la place et cela a commencé à fonctionner

<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />

<%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.bundle.min.js"></script>
0
Red_Phoenix

Il doit être /bootstrap.js, pas/bootstrap.min.js.

0
Tom Van de Velde