在反应中制作响应式菜单答案

【问题标题】：Make a responsive menu in react在反应中制作响应式菜单
【发布时间】：2019-08-24 01:56:05
【问题描述】：

我正在开发一个响应页面，当我在移动版本上看到它时，菜单组织全乱了。当我从 pc 版更改为移动版时，如何使菜单具有响应性？

【问题讨论】：

How to build a responsive website with ReactJs的可能重复

【解决方案1】：

Bootstrap 通常用于在网络上构建响应式、移动优先的项目。您可以在 React 项目中使用引导程序，方法是使用以下地址下载：npm i --save bootstrap。然后下载 Bootstrap 的依赖：popper.js，和JQuery。下载完所有内容后，在您的 React 组件中，您可以使用 className 属性将适当的 Bootstrap 类分配给组成组件的语义元素。

不过话虽如此，也许更简单的方法是使用React-Bootstrap，因为它是“React 友好版本的引导程序”。直接来自 React-Bootstrap 的文档：

"React bootstrap 替换了 Bootstrap javascript。每个组件都是作为真正的 React 组件从头开始构建的，没有像 jQuery 这样的不需要的依赖项。它在构建时考虑到了兼容性，我们拥抱我们的 bootstrap 核心并努力兼容世界上最大的 UI 生态系统。"

这是一个示例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>;

通过放大和最小化浏览器窗口来测试它，看看菜单如何随着不同的屏幕尺寸堆叠和变化。

希望对您有所帮助！

【讨论】：

【解决方案2】：

您可以使用React semantic ui。有很多 Ui 组件，而且都是响应式的。非常容易实现。

【讨论】：