React Bootstrap 中 Modal 组件 fullscreen 属性不生效问题咨询

给Modal组件添加fullscreen属性后，Modal并未进入全屏显示状态。

最小复现代码核心逻辑如下：

<Modal show={show} onHide={handleClose} fullscreen>
  <Modal.Header closeButton>
    <Modal.Title>Modal heading</Modal.Title>
  </Modal.Header>
  <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={handleClose}>
      Close
    </Button>
    <Button variant="primary" onClick={handleClose}>
      Save Changes
    </Button>
  </Modal.Footer>
</Modal>

Modal可以正常进入全屏显示状态。

该问题在本地项目中同样存在：本地项目使用最新版react-bootstrap包，示例使用版本为1.5.2。

• 操作系统：macOS M1
• 浏览器版本：Chrome v94
• React-Bootstrap版本：示例中为1.5.2，本地项目为1.6.3

在Chrome中开启手机模拟器访问Modal全屏示例时，fullscreen属性可以正常生效，对比自身代码和示例未发现明显差异，不清楚问题出在哪里。另外需求是仅让项目中某一个特定Modal在小屏幕尺寸下才进入全屏显示。

问题根因 #

1. 版本适配问题 #

Modal的fullscreen属性是React-Bootstrap 1.7.0版本才正式支持的特性，你使用的1.5.2、1.6.3版本都低于最低要求版本，所以属性不生效。

2. 断点设置问题 #

如果需要仅在小屏幕下全屏，需要给fullscreen属性传入对应的断点值，而非直接传布尔值true。

解决步骤 #

1. 先升级React-Bootstrap到1.7.0及以上版本：

npm install react-bootstrap@latest bootstrap@latest
# 或yarn
yarn add react-bootstrap@latest bootstrap@latest

需要同步升级Bootstrap样式依赖到对应版本，否则样式会不匹配。

2. 调整Modal组件属性写法：
   如果需要所有尺寸下都全屏：

<Modal show={show} onHide={handleClose} fullscreen>
  {/* 内容 */}
</Modal>

如果仅在小于等于sm断点（默认576px）的小屏幕下全屏：

<Modal show={show} onHide={handleClose} fullscreen="sm-down">
  {/* 内容 */}
</Modal>

支持的断点值包括：sm-down、md-down、lg-down、xl-down、xxl-down，可以按需选择。

3. 确认全局样式中正确引入了Bootstrap的CSS文件：

// 在项目入口文件（如App.js/index.js）引入
import 'bootstrap/dist/css/bootstrap.min.css';

内容的提问来源于stack exchange，提问作者JB Wilson