css - 如何使用 React.js 中的 Reactstrap 将导航栏折叠到移动视图中的侧边栏？

Question

参考下面评论中的图片链接，你知道如何在手机视图中正确实现将导航栏折叠成侧边栏的效果吗？如何在不影响和移动标志和按钮的情况下实现它？

//[Home Navbar Desktop View]: https://i.stack.imgur.com/THf6k.jpg 
//[Home Navbar Mobile View]: https://i.stack.imgur.com/CiJOc.png
//[Home Navbar/Sidebar Extend Mobile View]: https://i.stack.imgur.com/HhJxQ.png

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from "./components/home/home";
import About from "./components/about/about";
import Portfolio from "./components/portfolio/portfolio";
import Services from "./components/services/services";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, Button } from 'reactstrap';
import './App.css';
import 'tachyons';

class App extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
        <div className='App'>
        <Navbar className='sticky-top' color="light" light expand="md">
          <NavbarBrand href="/"><b className='logo'>Amecle</b></NavbarBrand>
          <NavbarToggler className="order-first" onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/about">About</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/services">Services</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/portfolio">Portfolio</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
          <Button className="still_on_view" outline color="primary">Request a quote</Button>{' '}
        </Navbar>

Answer 1

这个答案对我有用。

<Navbar className='sticky-top' color="light" light expand="md"> 更改expand="md"为（这expand="lg"表示最大 1024 像素（ipad 大小）的媒体何时会折叠）。