css - 我怎样才能让我的 react 导航栏响应

Question

我的 React 应用程序导航栏在移动 View 中不成比例，我尝试了可能使其具有响应能力但未成功的样式。这是我的应用程序在 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

这是关于导航栏在移动 View 上可以容纳多少元素，为了解决这个问题，默认采用的方法是显示菜单而不是常规的选项卡列表。

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

How TO - Responsive Top Navigation .

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