我已经使用reactBootstrap在我的react项目中添加了一个导航栏。从移动设备查看时,有什么方法可以隐藏其中一个navlink?我正在使用stylesComponents进行样式设置。
const StyledLink = styled(Nav.Link)`
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
color: ${(props) => (props.active ? "green !important" : "inherit")};
`;
<Nav>
<StyledLink>BACK </StyledLink>
<StyledLink>HOME </StyledLink>
<StyledLink active>{props.page}</StyledLink>
</Nav>
如果屏幕很小而没有媒体查询,是否可以隐藏StyledLink组件之一?
TIA
一种方法是根据设备的宽度设置display: none
或display: block
。
const StyledLink = styled(Nav.Link)`
display: none;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
color: ${(props) => (props.active ? "green !important" : "inherit")};
@media (min-width: 576px) {
display: block;
}
`;