Javascript 在手机中使用reactjs时，如何隐藏网站的导航栏？

我正在用reactjs建立一个网站，我想实现像Instagram这样的东西。因此，当用户在pc上访问此网站时，他们应该看到导航栏，如果用户在其手机上访问此网站，则他们应该看到底部选项卡导航，导航栏应该隐藏。我还附上了我的桌面和移动用户界面的设计照片，这样你们可以有更好的想法。此外，我没有使用任何UI库，只使用简单的reactjs

---

最简单的解决方案是使用两种版本的导航栏

一个导航，一个导航手机

---

您可以使用css媒体查询按最小/最大屏幕大小隐藏/显示它们，这是最常见的做法之一，而不是使用任何其他方式，我建议您使用css媒体查询。它会让你的生活变得轻松。 您只需指示要隐藏代码的哪一部分。 假设您的导航栏的类被放入媒体查询中，如下所示，并将引导的CDN放入您的页面。 i、 e

---

创建两个版本的导航栏，一个用于桌面，另一个用于移动设备。使用媒体查询，根据屏幕大小隐藏。@AshishJhanwar我应该为两者创建单独的导航栏组件，并将它们导入到我的app.js中吗？如果是这样，那么我应该在哪里使用媒体查询？是的。创建一个具有所有控制功能的基本组件（例如，在单击图标时更改为不同的选项卡），从基本组件扩展两个纯ui组件。@AshishJhanwar和媒体查询？我应该在哪个文件中使用它？App.js或App.css？好的，那么我应该为大屏幕和小屏幕创建两个单独的导航栏组件，并将它们导入我的App.js？如果是这样，那么我应该在哪里使用媒体查询？在桌面上，如果屏幕尺寸小于特定宽度（maxwidth:720px），使用媒体查询隐藏导航，例如在移动设备上，当屏幕大于特定宽度（minwidth:719px）时隐藏。媒体查询应该在组件的css文件中，与全局css文件不同，封装对于防止冲突非常重要。这太棒了！我可以仅仅为了响应而使用纯引导吗？我不需要jQuery，因为像drop这样的菜单可以在react中自行设计。您可以使用纯引导和CSS组合来实现响应。不仅适用于台式机、移动设备，甚至平板电脑和iPad也可以实现。接下来是jQuery问题的第二点。它也可以通过引导本身来解决。这将使你的代码更少，更容易阅读。因为你只需要提到内置函数。谢谢！是否有相同或某些文档的教程可用于安装引导信息。在一个普通的HTML网站中，我们只需下载引导文件并将其导入HTML。但是我不知道如何在react中实现？您只需要将下面提到的代码行放入您的HTML头部，其他什么都没有。如果您已连接到internet。另外你可以参考bootstrap的官方网站。实际上由于评论人物的限制，我不能把它们放在这里。但是提到这个网站，只要把CDN的行复制到你的网站上，你就完成了。

 @media query("Size for what you want to hide navbar)(i.e. 480px or 320px)
          .nav {
               visibility; hidden;
           }