从移动设备查看时隐藏Nav.Link元素。 (ReactBootstrap,TypeScript)

问题描述 投票:0回答:1

我已经使用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

reactjs typescript bootstrap-4 react-bootstrap styled-components
1个回答
0
投票

一种方法是根据设备的宽度设置display: nonedisplay: 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;
  }
`;
© www.soinside.com 2019 - 2024. All rights reserved.