从移动设备查看时，隐藏Nav.Link元素.(ReactBootstrap，TypeScript) [英] Hide a Nav.Link element when viewed from mobile. (ReactBootstrap,TypeScript)

问题描述

我已经使用reactBootstrap在我的react项目中添加了一个导航栏.从移动设备查看时，有什么方法可以隐藏其中一个navlink?我正在使用stylesComponents进行样式设置.

I have added a navbar in my react project using reactBootstrap. is there any way to hide one of the navlink when viewed from mobile device.? I am using stylesComponents for styling.

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 组件之一?

is it possible to hide one of the StyledLink component if the screen is small without media query?

TIA

推荐答案

一种方法是根据设备的设置 display:none 或 display:block 宽度.

One way to do it is to set display: none or display: block based on the device's width.

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;
  }
`;

这篇关于从移动设备查看时，隐藏Nav.Link元素.(ReactBootstrap，TypeScript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！