reactjs - React-bootstrap Navbar 示例似乎没有在本地呈现
问题描述
这是来自https://react-bootstrap.github.io/components/navbar/的示例。在本地运行时,下拉菜单不会打开以显示下拉菜单。
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
解决方案
我遇到了同样的问题。当我从头开始重新创建一个全新的文件夹/环境并正确安装所有依赖项时,它就可以工作了。
后来我发现这是因为我从另一个第三方库继承了一个 .scss 文件。它与 react-bootstrap 冲突。我删除了该文件,然后它开始正常工作。您必须找到任何此类依赖项并确保更正它们。
推荐阅读
- angular - 如何将 routerlinkactive 与功能一起使用
- javascript - javascript中使用的参考在catch-Block中不可用
- sql-server - 使用 splunk 跟踪 sql server 中的内存转储?
- ios - 在 SwiftUI 中的 Form 上捕捉 Tap 手势
- wordpress - 如何修复破坏页面的 WordPress 模板错误
- appium - 如何在Python中找到具有相同ID的appium中的多个元素?
- resharper - 如何手动将缩写添加到 ReSharper 缩写列表?
- javascript - 提取单元格编辑器名称并将其写入相应的行
- c - 如何在c中的数组中插入新元素
- java - 为什么类不注入模块?