La navigation Bootstrap 4 ne se développe pas après avoir cliqué sur le bouton bascule

mercure0

Donc, je crée une barre de navigation dans Bootstrap 4. Mais pour une raison quelconque, lorsque ma barre de navigation est réduite (lorsque j'utilise un écran / une fenêtre plus petit) et que je clique sur le bouton qui est censé l'agrandir à nouveau, rien ne se passe. La barre de navigation n'est pas visible. De plus, j'ai mis la classe "navbar-toggler-right" sur mon bouton, mais ce n'est pas sur le côté droit pour une raison quelconque.

Mon code:

<html>

<head>
    <meta charset="utf-8">
    <title>Admin</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

    <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


<body>
<nav class="navbar navbar-light navbar-expand-lg">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="navbarNavDropdown" class="collapse navbar-collapse" >
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#Pricing">Pricing</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#About">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#FAQ">FAQ</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#Blog">Blog</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#Contact">Contact</a>
        </li>
    </ul>
    </div>
</nav>

</body>

</html>
Adel Elkhodary

Juste jquery-3.3.1.slim.min.jsavant lebootstrap.min.js

<html>

<head>
    <meta charset="utf-8">
    <title>Admin</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <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://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

    <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


<body>
<nav class="navbar navbar-light navbar-expand-lg">
 <div class="container">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbarNavDropdown">
    <span class="navbar-toggler-icon"></span>
</button>

<div id="navbarNavDropdown" class="collapse navbar-collapse" >
<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="#Pricing">Pricing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#About">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#FAQ">FAQ</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#Blog">Blog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#Contact">Contact</a>
    </li>
</ul>
</div>
	</div>
</nav>
</body>

</html>

Articles connexes

Le bouton ne se désactive pas après avoir cliqué dessus

Elben J'ai créé un bouton qui réinitialise une valeur de zone de texte à la valeur par défaut, comme indiqué: <Button x:Name="DefaultButton" Grid.Row="0" Grid.Column="3" Click="OnDefaultClicked"> Voici la Clickméthode: private void On