Le problème est que lorsque je clique sur l'élément de la barre de navigation, il ne redirige pas vers la page et ne donne aucun commentaire. Mais lorsque je supprime le bootstrap.bundle.min.js
cela fonctionne comme il se doit, mais le bouton d'expansion de la barre de navigation lorsqu'il est réduit ne fonctionne pas.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Document</title>
<style>
.nav{
margin-bottom: 0px !important;
margin-top: 0px !important;
}
</style>
</head>
<body>
<!--Heading Navbar-->
<header class="border-bottom site-header sticky-top bg-white">
<nav class="navbar navbar-light navbar-expand-lg bg-white">
<div class="container-fluid">
<div class="d-flex flex-grow-1">
<a href="#" class="navbar-brand col-md-3 bg-white">
<img src="logo.jpg" class="img-fluid">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navNavbar" aria-controls="navNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="navNavbar" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item">
<a class="nav-link px-2 m-2 link-dark" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 m-2 link-secondary" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 m-2 link-secondary" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 m-2 link-secondary" href="contactus.html" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Content-->
<!--Necessary Scripts-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Le problème est le data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"
sur la navbar-collapse
div. Supprimez-le et la navigation fonctionnera correctement.
<div class="collapse navbar-collapse flex-grow-1 text-right" id="navNavbar" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
<ul class="navbar-nav ms-auto flex-nowrap">
...
</ul>
</div>
De plus, jQuery n'est pas requis pour Bootstrap 5
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots