Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée
P粉311464935
P粉311464935 2024-04-05 08:45:39
0
1
3588

Voici le code :

<nav xmlns:sec="http://www.thymeleaf.org/extras/spring-security"  class="navbar navbar-expand-lg fixed-top container-fluid" id="navbar">
<div class="container px-4">
    <a class="navbar-brand" href="/main"> <img src="https://i.imgur.com/BKHVvT0.png" style="width: 100px; height: auto;"> </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ms-auto">
            <li  sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/login">Inicio sesión</a></li>
            <li  sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/register">Registro Cliente</a></li>
            <li  sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link" href="/registrohotel">Registro Hotel</a></li>

            <li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a class="nav-link" href="/historialReservaClienteVigentes">Tus reservas</a></li>
            <li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a class="nav-link" href="/perfilcliente">Perfil</a></li>
            <li sec:authorize="hasAuthority('CLIENTE')" class="nav-item"><a sec:authorize="isAuthenticated()" class="nav-link" th:href="@{/logout}"> <i class=" fas fa-door-open"></i></a></li>

            <li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a class="nav-link" href="/admin">Administrador</a></li>
            <li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a class="nav-link" href="/perfilhotel">Perfil</a></li>
            <li sec:authorize="hasAuthority('HOTEL')" class="nav-item"><a sec:authorize="isAuthenticated()" class="nav-link" th:href="@{/logout}"> <i class="   fas fa-door-open"></i></a></li>

        </ul>
    </div>
</div>

Le fait est qu'il apparaît à l'écran, mais lorsqu'il interagit avec lui, il ne fait rien. Le bas du sélecteur apparaît, mais lorsque vous cliquez dessus, les éléments de navigation n'apparaissent pas au-dessus.

P粉311464935
P粉311464935

répondre à tous(1)
P粉463418483

Si vous ajoutez bootstrap cdns: script et css, cela fonctionnera. Voir l'extrait de code ci-dessous :



  
  
  
  Document
  
sssccc

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


  
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal