Question

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

Answer 1

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

尽管如此，也许更简单的方法是利用React-Bootstrap，因为它是“ bootstrap的反应友好版本”。直接来自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>;

通过扩大和最小化浏览器窗口来进行测试，以查看菜单如何在不同的屏幕尺寸下堆叠和更改。

希望有帮助！

Answer 2

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

在反应中做出响应式菜单

2 个答案: