Reactjs 手机上没有显示任何信息
有一个问题,当屏幕太小时,应该显示的可折叠菜单是透明的。它仍然有效,但不可见,这显然不是我想要的。我正在使用reactstrap制作可折叠菜单,但到目前为止,在我的研究中,我还没有发现一种使其可见的方法 有人能帮我解决这个问题吗?发生此问题的文件位于Reactjs 手机上没有显示任何信息,reactjs,bootstrap-4,mern,reactstrap,Reactjs,Bootstrap 4,Mern,Reactstrap,有一个问题,当屏幕太小时,应该显示的可折叠菜单是透明的。它仍然有效,但不可见,这显然不是我想要的。我正在使用reactstrap制作可折叠菜单,但到目前为止,在我的研究中,我还没有发现一种使其可见的方法 有人能帮我解决这个问题吗?发生此问题的文件位于render方法中 <Navbar expand="sm" className="mb-3 my-navbar"> <Container> <NavbarB
render
方法中
<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>
作家
{isAuthenticated?authLinks:guestLinks}
由于您没有为导航栏使用主题,因此切换按钮的CSS不会出现。作为修复,您可以尝试向导航栏添加一个主题,例如,navbar灯
,您将看到汉堡按钮出现
<Navbar expand="sm" className="mb-3 my-navbar navbar-light">
.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");
}