reactstrap Collapse 没有出现在手机上答案

【问题标题】：reactstrap Collapse is not showing up on mobilereactstrap Collapse 没有出现在手机上
【发布时间】：2020-12-25 09:45:11
【问题描述】：

The website I'm working on 存在一个问题，即当屏幕尺寸太小时应该显示的可折叠菜单是透明的。它仍然有效，但它不可见，这显然不是我想要的。我正在使用 reactstrap 制作可折叠菜单，但在我的研究中到目前为止我还没有找到一种让它可见的方法。

有人可以帮我解决这个问题吗？发生此问题的文件是render 方法中的here。

<Navbar expand="sm" className="mb-3 my-navbar">
    <Container>
        <NavbarBrand tag={RRNavLink} exact to="/"
            className="my-navbar-brand">Writer</NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
                {isAuthenticated ? authLinks : guestLinks}
            </Nav>
        </Collapse>
    </Container>
</Navbar>

【问题讨论】：

标签： reactjs bootstrap-4 mern reactstrap

【解决方案1】：

由于您没有为导航栏使用主题，因此不会出现切换按钮的 CSS。作为修复，您可以尝试向导航栏添加主题，例如，navbar-light，您将看到汉堡按钮出现

<Navbar expand="sm" className="mb-3 my-navbar navbar-light">

或者，您可以添加您喜欢的笔划颜色的 CSS。 Here 是 navbar-light 汉堡按钮笔划的 CSS：

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

【讨论】：