javascript - React Bootstrap 全屏 Prop 不起作用

Question

描述错误

将 fullscreen 属性添加到 Modal 并不能使 Modal 进入全屏。

可重现的例子

使用 CodeSandbox 的最小示例.

预期行为

要全屏的模式。

截图

这是 Code Sandbox 上的示例。它也不适用于我的应用程序。在我的应用程序中，我使用的是最新版本的 react-bootstrap 包。 Code Sandbox 示例使用的是 1.5.2。

环境

• 操作系统:macOS M1
• 浏览器，版本:Chrome v94
• React-Bootstrap 版本:代码沙盒上的 1.5.2。 1.6.3 在我的应用中。

附加上下文

我很困惑，因为全屏 Prop 似乎在文档中的示例中有效。您可以在 Chrome 中运行手机模拟器 here并看到它工作。我没有发现我的应用程序中的代码与文档中的代码有任何重要区别。我错过了什么吗？做错了什么？最后，我试图只影响我的应用程序中的一个特定模态，并且我只希望模态在屏幕尺寸较小时全屏显示。非常感谢任何帮助!

Answer 1

答案是 Bootstrap Modal 上的全屏 Prop 仅与 react-bootstrap 版本 5 兼容。有人好心地帮助我解决了 this GitHub issue .

要升级到 Bootstrap 5，请在您的终端中运行这些命令:

1. npm 卸载 Bootstrap
2. npm uninstall react-bootstrap
3. npm install react-bootstrap@next bootstrap@5.1.1
4. 将以下代码片段放入您的公共(public)文件夹中的 index.html 文件

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
 integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
 crossorigin="anonymous"
/>

如果您还没有安装 Bootstrap，则不需要前两个命令。

注意:如果您的应用使用的是 Bootstrap 4，可能不值得仅仅为了这个 prop 升级到 Bootstrap 5。至少有几个 Bootstrap 4 React 组件与 Bootstrap 5 不兼容(即 Form.File、Accordion.Toggle 和 InputGroup.Prepend)。