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

【问题标题】：How can I make my react navbar responsive如何使我的反应导航栏响应
【发布时间】：2019-07-09 11:02:26
【问题描述】：

我的 react 应用导航栏在移动视图上不成比例，我尝试了可能的样式，使其具有响应性但不成功。这是我的应用在mobile 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%);
}

【问题讨论】：

标签： css reactjs

【解决方案1】：

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

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

How TO - Responsive Top Navigation.

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

【讨论】：