Javascript 当屏幕大小改变时，如何停止引导（reactstrap）下拉菜单重新定位？

在纵向模式下，有足够的空间让下拉菜单显示在您单击以显示菜单的按钮下：

但如果屏幕尺寸足够小（在某些移动设备上为横向），则菜单点会向上移动并覆盖图标：

这意味着不离开横向模式就很难关闭菜单

我使用的示例与ReactStrap的文档相同：

import React，{useState}来自“React”；
从“reactstrap”导入{Dropdown，DropdownToggle，DropdownMenu，DropdownItem}；
常量示例=（道具）=>{
const[dropdownOpen，setDropdownOpen]=useState（false）；
常量切换=（）=>setDropdownOpen（prevState=>！prevState）；
返回(
下拉列表
标题
一些行动
行动（已禁用）
富奥行动
酒吧活动
维持现状行动
);
}
导出默认示例；

---

我想找到一种方法，在没有完整菜单高度的屏幕上停止下拉菜单移动位置。

我通过阅读代码找到了我想要的答案

将

nav

和

inNavBar

添加到

中，并将

nav

添加到

中，似乎已经做到了这一点

---

下面是引入该值的PR:

我通过阅读代码找到了我想要的答案

将

nav

和

inNavBar

添加到

中，并将

nav

添加到

中，似乎已经做到了这一点

以下是引入价值的PR：

import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

const Example = (props) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        Dropdown
        </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Some Action</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Foo Action</DropdownItem>
        <DropdownItem>Bar Action</DropdownItem>
        <DropdownItem>Quo Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

export default Example;