La barre de navigation lorsque vous cliquez dessus ne redirige pas vers une autre page bootstrap 5

Mat

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.jscela 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>

Zim

Le problème est le data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"sur la navbar-collapsediv. 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>

Démo

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.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

  1. 1

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  2. 2

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  3. 3

    Microsoft.WebApplication.targets

  4. 4

    knn classification 10 plis de l'outil et du tri

  5. 5

    Quelle est la relation entre le modèle et le tableau ? C'est compliqué

  6. 6

    Créer un système Buzzer à l'aide de python

  7. 7

    Fonction de puissance en Java

  8. 8

    opérations en virgule flottante dans go

  9. 9

    Comment définir la couleur de l'intersection dans un diagramme de Venn?

  10. 10

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  11. 11

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  12. 12

    AutoMapper.Collection.EFCore - Erreur générée lors de la configuration

  13. 13

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

  14. 14

    Comment remplir les valeurs manquantes avec plusieurs colonnes dans R

  15. 15

    Comment puis-je ajouter un UIView sous mon contrôleur de barre d'onglets par programme?

  16. 16

    Yat-il un référentiel maven application Java à démarrer rapidement 11

  17. 17

    Comment rechercher des éléments dans une ArrayList? - Java

  18. 18

    Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

  19. 19

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  20. 20

    Sélectionnez le bouton radio sur la saisie de texte

  21. 21

    Placez le modeBar en haut au centre à l'aide de plotly.js

chaudétiquette

Archive