1

tal cual no me muestra el contenido el menu hamburguesa en responsive... incluso intente solo copiar el codigo directamente de la documentacion bootstrap y nada... senecesita algun jquery o JS?

<nav class="navbar navbar-expand-lg  bg-primary borde-3 border-bottom border-primary">
<div class="container-fluid">
<a href="#" class="navbar-brand" style="color: black;">nombre</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs- 
target="#menu"  style="color: #000 !important;">
<i class="fas fa-bars"></i>
</button>

<div id="menu" class="collapse navbar-collapse">
<ul class="navbar-nav ms-3">
<li class= "nav item"><a class="nav-link" href="#"> inicio</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Nosotros</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Nuestros servicios</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Galeria</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Cotizacionez</a> </li>
</ul>
</div>

</div>
</nav>
     
2
  • 1
    añadiste los archivos js como indica el doc de bootstrap?
    – Roy
    el 1 sep. 2021 a las 15:24
  • Que versión de bootstrap estas usando en las referencias? el 1 sep. 2021 a las 16:11

1 respuesta 1

1

El error se genera a partir de un espacio en la siguiente línea: "data-bs- target" , lo correcto es "data-bs-target"(sin espacios).

Resultado:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg   borde-3 border-bottom border-primary">
<div class="container-fluid">
<a href="#" class="navbar-brand" style="color: black;">nombre</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu"  style="color: #000 !important;">
<i class="fas fa-bars"></i>
</button>

<div id="menu" class="collapse navbar-collapse">
<ul class="navbar-nav ms-3">
<li class= "nav item"><a class="nav-link" href="#"> inicio</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Nosotros</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Nuestros servicios</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Galeria</a> </li>
<li class= "nav item"><a class="nav-link" href="#"> Cotizacionez</a> </li>
</ul>
</div>

</div>
</nav>

2
  • El OP utiliza Bootstrap 5, no 4 el 2 sep. 2021 a las 13:36
  • amigo, he modificado la respuesta. se modificó el código a bootstrap 5 el 2 sep. 2021 a las 14:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.