reactstrap中的显示子菜单（Bootstrap）

Question

我正在使用reactstrap css框架在reactjs中创建一个应用程序。我正在尝试使用菜单和子菜单（仅子菜单一级）创建导航栏。

正在运行的演示： https://stackblitz.com/edit/reactstrap-navbartoggler-example-fmbvpa

而且我正在努力通过一个JS文件来实现这一目标，

Example.JS

<UncontrolledButtonDropdown>
   <DropdownToggle caret size="md">
      Menu 1
   </DropdownToggle>

   <DropdownMenu>
      <span> Sub Menu 1 </span>
      <DropdownItem>Sub Menu 1.1</DropdownItem>
      <DropdownItem>Sub Menu 1.2</DropdownItem>

      <span> Sub Menu 2 </span>
      <DropdownItem>Sub Menu 2.1</DropdownItem>
      <DropdownItem>Sub Menu 2.2</DropdownItem>
   </DropdownMenu>
</UncontrolledButtonDropdown>

我仅需要以上部分。

我在点击切换按钮时列出了一个下拉菜单，在这里我将Menu 1作为下拉菜单。

对于普通视图，保持原样，但对于响应视图，菜单应按顺序显示。

所以看起来像，

The navbar with dropdown menu

然后单击父菜单（菜单1），然后单击子菜单1该部分需要显示为，

The dropdown menu listing sub menus separately in another view

因此，您可以看到菜单将首先显示，然后单击菜单，子菜单需要在另一个视图上单独显示。

我恳请您帮助我使此工作与所提供的上述图像完全相同（期望的结果）。

->用户界面部分不是问题，我会照顾它。

->桌面视图解决方案也是可选的

->但是我需要使它像预期的那样工作，主要是在响应视图中，这是我的问题的目标

这里的任何专家都请帮助我解决该问题。

提前感谢。

Answer 1

为了使下拉菜单具有响应性，我认为您不能使用reactstrap库。但是，您可以使用引导程序库来呈现响应式下拉列表。遵循此link。