我该如何使我的导航栏响应

Question

我的react应用程序navbar在移动视图上不成比例，我尝试了可能的样式，这些样式可能会使它响应且不成功。 这是我的应用在mobile view

上的样子

这是desktop view

这是默认样式

css

.main-nav {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.left-nav-menu {
  position: relative;
  float: left;
  top: 50%;
  transform: translateY(-50%);
}

.right-nav-menu {
  position: relative;
  float: right;
  top: 50%;
  transform: translateY(-50%);
}

Answer 1

关于导航栏可以在移动视图上容纳多少元素，要解决此问题，默认的方法是显示菜单，而不是常规的选项卡列表。

这种用法的一个很好的例子。

https://mediasoup.discourse.group。

PS：在浏览器开发工具中转到移动视图，以查看示例在桌面视图和移动视图之间的区别。