He agregado Bootstrap a mi sitio de prueba, creado con Gatsby .
Algo va mal con mi menú receptivo de Bootstrap. El código parece estar bien:
return ( <nav className="navbar navbar-nav navbar-expand-xl navbar-light bg-light fixed-top"> <div className="container" id="nav"> <Link className="navbar-brand" to="/"><StaticImage src="../img/logo-min.png" alt="WaJK Logo" height={75}/> <span className="we">We </span><span className="are">are </span><span className="just">Just </span><span className="kids">Kids</span> </Link> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarResponsive"> <ul className="navbar-nav ml-auto"> { data.allMdx.nodes.map((node, i) => ( <li className="nav-item" key={node.frontmatter.url}> <Link className="nav-link" to={"../" + node.frontmatter.url}>{node.frontmatter.menu_name}</Link> </li> )) } </ul> </div> </div> </nav> )
Y los scripts se están cargando bien:
El button
aparece correctamente y el navbarResponsive
desaparece en una pantalla pequeña. Pero cuando hago clic en mi button
, el navbarResponsive
no aparece; no sucede nada cuando se hace clic en el botón.
¿Cómo depuro esto para averiguar qué está yendo mal? No obtengo mucha información útil de las herramientas de desarrollo de Firefox.