El código de muestra para la barra de navegación que copié de la página de documentación de bootstrap v5.0 no funciona cuando lo estoy probando en mi propia página html.
Sí, copié el enlace CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
Además de los otros tres enlaces JS también.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
Aquí está el ejemplo de código que utilicé:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Y aquí está la página de documentación.
enlace
¿Alguien puede ayudarme a solucionarlo?
------------------------------------
Estaba comprobando el problema y descubrí que tienes varios enlaces para javascript.
Elimine los scripts Popper.js y bootstrap.min.js. Cuando utiliza el paquete, no necesita incluirlo.ellos.
Paquete
Incluya todos los complementos y dependencias de JavaScript de Bootstrap con uno de nuestros dos paquetes. Tanto bootstrap.bundle.js como bootstrap.bundle.min.js incluyen Popper para nuestra información sobre herramientas y ventanas emergentes. Para obtener más información sobre lo que se incluye en Bootstrap, consulte nuestra sección de contenidos.
Eso significa que solo necesitas dejar el CSS y esta línea
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
Aquí está la muestra. Tenga en cuenta que en los recursos solo utilicé CSS y Bundle. Después de hacer esas correcciones debería empezar a funcionar normalmente.
https://jsfiddle.net/ped823cw/
Respondido
26 de marzo de 2021 a las 19:27
carlosmena
carlosmeno
56
2
2 insignias de bronce
1
1
Gracias por esta respuesta. Estaba teniendo el mismo problema en React. Para cualquiera que tenga un problema similar al usar React, agregue import 'bootstrap/dist/js/bootstrap.bundle'. a su archivo index.js
- Juan
11 de marzo de 2022 a las 22:43
------------------------------------
Si está integrando bootstrap en su reactJS y tiene este problema. Tal como comentó John, lo que debe hacer es simplemente agregar lo siguiente en su archivo index.js o App.js
import 'bootstrap/dist/js/bootstrap.bundle'
------------------------------------
Cambiar los atributos de arranque de data-toggle y data-target a data-bs-toggle y data-bs-target funcionó para mí.
Hay más detalles disponibles aquí:
¿Cuál es la diferencia entre los atributos Bootstrap data-toggle y data-bs-toggle?
