Home  >  Q&A  >  body text

Bootstrap switch not working properly when web page is resized

This is the 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>

The fact is that it does appear on the screen, but when interacted with it does nothing. The switcher bottom does appear, but when clicked, it doesn't make the navigation items appear above it.

P粉311464935P粉311464935177 days ago3450

reply all(1)I'll reply

  • P粉463418483

    P粉4634184832024-04-06 00:19:54

    If you add bootstrap cdns: script and css, it will work. See the code snippet below:

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

    reply
    0
  • Cancelreply