React Bootstrap 全屏道具不工作
React Bootstrap fullscreen prop not working
描述错误
将全屏属性添加到 Modal 并不能使 Modal 进入全屏状态。
可重现的例子
使用 CodeSandbox 的最小示例。
预期行为
模态全屏。
截图
这是代码沙盒上的示例。它也不适用于我的应用程序。在我的应用程序中，我使用的是最新版本的 react-bootstrap 包。 Code Sandbox 示例使用的是 1.5.2。
环境
- 操作系统：macOS M1
- 浏览器，版本：Chromev94
- React-Bootstrap 版本：代码沙箱上的 1.5.2。 1.6.3 在我的应用程序中。
其他上下文
我很困惑，因为全屏道具似乎在文档中的示例中有效。您可以在 Chrome here 中 运行 一个 phone 模拟器并查看它的运行情况。
我没有发现我的应用程序中的代码与文档中的代码有任何重要区别。我错过了什么吗？做错了什么？
最后，我试图只影响我的应用程序中的一个特定模态，并且我只希望模态在屏幕尺寸较小时全屏显示。
非常感谢任何帮助！
您必须删除容器的填充
将此样式添加到您的模态对话框中：
style="max-width: 100% !important; max-height: 100% !important;"
答案是 Bootstrap Modal 上的全屏属性仅与 react-bootstrap 版本 5 兼容。有人好心地帮助我 this GitHub issue。
要升级到 Bootstrap5，运行 在您的终端中输入这些命令：
npm uninstall bootstrapnpm uninstall react-bootstrapnpm install react-bootstrap@next bootstrap@5.1.1- 将以下代码片段放入您的 index.html 文件中，在您的 public 文件夹中
<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，可能不值得仅仅为了这个道具升级到 Bootstrap 5。至少有几个 Bootstrap 4 React 组件与 Bootstrap 5 不兼容，（即 Form.File、Accordion.Toggle 和 InputGroup.Prepend）。
描述错误
将全屏属性添加到 Modal 并不能使 Modal 进入全屏状态。
可重现的例子
使用 CodeSandbox 的最小示例。
预期行为
模态全屏。
截图
这是代码沙盒上的示例。它也不适用于我的应用程序。在我的应用程序中，我使用的是最新版本的 react-bootstrap 包。 Code Sandbox 示例使用的是 1.5.2。
环境
- 操作系统：macOS M1
- 浏览器，版本：Chromev94
- React-Bootstrap 版本：代码沙箱上的 1.5.2。 1.6.3 在我的应用程序中。
其他上下文
我很困惑，因为全屏道具似乎在文档中的示例中有效。您可以在 Chrome here 中 运行 一个 phone 模拟器并查看它的运行情况。 我没有发现我的应用程序中的代码与文档中的代码有任何重要区别。我错过了什么吗？做错了什么？ 最后，我试图只影响我的应用程序中的一个特定模态，并且我只希望模态在屏幕尺寸较小时全屏显示。 非常感谢任何帮助！
您必须删除容器的填充
将此样式添加到您的模态对话框中：
style="max-width: 100% !important; max-height: 100% !important;"
答案是 Bootstrap Modal 上的全屏属性仅与 react-bootstrap 版本 5 兼容。有人好心地帮助我 this GitHub issue。
要升级到 Bootstrap5，运行 在您的终端中输入这些命令：
npm uninstall bootstrapnpm uninstall react-bootstrapnpm install react-bootstrap@next bootstrap@5.1.1- 将以下代码片段放入您的 index.html 文件中，在您的 public 文件夹中
<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，可能不值得仅仅为了这个道具升级到 Bootstrap 5。至少有几个 Bootstrap 4 React 组件与 Bootstrap 5 不兼容，（即 Form.File、Accordion.Toggle 和 InputGroup.Prepend）。