首页 文章

带有React和Bootstrap的响应式导航菜单 - 汉堡包不是很好的

提问于
浏览 次
0

我用Bootstrap创建了一个简单的导航菜单 . 它在纯JavaScript中运行良好，但在将其调整为反应时，汉堡包图标不起作用（点击时没有任何反应） . 我安装了bootstrap

npm install --save bootstrap

然后将bootstrap css添加到公用文件夹中的index.html：

link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"

我的jsx如下：

<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
        <div className="container">
          <button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
              </li>
              <li className="nav-item">
                <Link to="/app/about" className="nav-link">ABOUT</Link>
              </li>
              <li className="nav-item">
                <Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
              </li>
              <li className="nav-item">
                <Link to="#share-head-section" className="nav-link">CONTACT</Link>
              </li>
            </ul>
        </div>
        </div>
      </nav>

同样，除了汉堡包图标不起作用外，一切看起来都很好 . 有任何想法吗？

提前致谢

reactjs twitter-bootstrap responsive hamburger-menu

2 回答

  • 0

    Bootstrap事件需要jQuery，Popper和Bootstrap.js source . 该页面还将告诉您哪些组件需要JS . 您可以在 index.html 文件中包含jQuery，Popper和bootstrap.js，您可以在其中加载包 . 添加它，或者只是查看Reactstrap，它在React中实现Bootstrap组件 .

    回复于
  • 0

    根据https://www.npmjs.com/package/bootstrap#whats-included，npm版本的Bootstrap不包含jQuery，但导航栏组件需要它，因此您可能需要将https://www.npmjs.com/package/jquery添加到依赖项中 .

    回复于

相关问题