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.