css Bootstrap 切换不适用于React [关闭]

4xy9mtcn 于 2023-02-26 发布在 Bootstrap

关注(0)|答案(2)|浏览(184)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
3天前关闭。
Improve this question
我从bootstrap中下载了切换代码，并应用了我的示例react项目，但结果发现它不起作用。如果我缩小窗口大小，切换按钮将显示，但如果我单击它，切换按钮将不起作用，没有显示，也没有发生任何事情。我在控制台或其他地方看不到错误。我的代码：

<nav className="navbar navbar-expand-lg bg-body-tertiary bg-dark">
      <div className='container-fluid'>
        <a className="navbar-brand" href="#"> <img src={Logo} width={100} height={50} alt='Logo' ></img> </a>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button> 
        <div className='collapse navbar-collapse' id='navbarSupportedContent'>
          <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
            <li className='nav-item'>
              <a className='nav-link active' aria-current='page' href='#'>Home</a>
            </li>
            <li className='nav-item'>
              <a className='nav-link' href='#'>Link</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

我也检查了其他人的类似问题，但解决方案不适合我。
知道问题出在哪里吗？

css

来源：https://stackoverflow.com/questions/75525644/bootstrap-toggle-does-not-work-with-react

2条答案

按热度按时间

7ajki6be1#

你需要实现所需的JS来使它工作。react有一个单独的包react-bootstrap，你可以用它来实现引导组件，你只需要安装并包含这个包。
对于导航栏切换：https://react-bootstrap.github.io/components/navbar/

赞(0）回复(0）举报 2023-02-26

e0uiprwp2#

这是因为你使用的是普通的bootstrap类名，既然你应该使用react-bootstrap属性和标签，你可以使用下面的例子，然后找出你的代码有什么问题：

<Navbar className="navbar-light" expand="lg" dir="rtl">
                <Container>
                    <Link to={"/"}>
                        <img src={process.env.PUBLIC_URL + '/images/webchin.png'} width="120" alt="Webchin" />
                    </Link>
                    <Navbar.Toggle aria-controls="navbarScroll" />
                    <Navbar.Collapse id="navbarScroll">
                        <Nav navbarScroll className="me-auto my-2 my-lg-0">
                            <li className="nav-item">
                                <Link className="nav-link active" aria-current="page" to={""}>
                                    Website
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to={""}>
                                    Reports
                                </Link>
                            </li>
                            <NavDropdown title="Academia" id="navbarScrollingDropdown">
                                <Link className="d-flex align-items-center justify-content-end dropdown-item" to={""}>
                                    HTML
                                </Link>
                                <Link className="d-flex align-items-center justify-content-end dropdown-item" to={""}>
                                    CSS
                                </Link>
                                <Link className="d-flex align-items-center justify-content-end dropdown-item" to={""}>
                                    JavaScript
                                </Link>
                                <Link className="d-flex align-items-center justify-content-end dropdown-item" to={""}>
                                    jQuery
                                </Link>
                                <Link className="d-flex align-items-center justify-content-end dropdown-item" to={""}>
                                    PHP
                                </Link>
                                <Link className="d-flex align-items-center justify-content-end dropdown-item" to={""}>
                                    MySQL 
                                </Link>
                            </NavDropdown>
                            <li className="nav-item">
                                <NavLink className="nav-link" href="https://www.kurdfonts.com/ku/">
                                    <Link21 size="20" color="currentColor" className="mx-1" />
kurdish fonts
                                </NavLink>
                            </li>
                        </Nav>
                        <form className="d-flex">
                            <input
                                className="form-control me-2"
                                type="search"
                                name="query"
                                placeholder="search for something..."
                                aria-label="Search"
                                id="search" />
                            <span></span>
                        </form>
                    </Navbar.Collapse>
                </Container>
            </Navbar>

赞(0）回复(0）举报 2023-02-26

我来回答

css Bootstrap 切换不适用于React [关闭]

2条答案

相关问题

热门标签

最新问答