Laravel中实现Bootstrap全屏模态框无法正常全屏显示如何修复

问题根因 #

你当前的模态框代码嵌套在.site-section、.container、.col-lg-6等带宽度限制、包含定位属性的父容器内，导致模态框的尺寸被父元素约束，即使添加全屏类也无法正常占满视口。

修复步骤 #

• 第一步：调整模态框代码位置，将整个<div class="modal fade" id="exampleModal">块移动到页面</body>闭合标签之前，和所有内容容器平级，不要嵌套在任何页面内容布局容器内。
• 第二步：适配Bootstrap版本的全屏类：
  • 如果你使用的是Bootstrap 5，直接给.modal-dialog添加modal-fullscreen类即可实现全尺寸下的全屏效果，modal-fullscreen-xxl-down仅会在屏幕宽度小于xxl断点时才生效为全屏，xxl以上尺寸仍保持常规模态框宽度。
  • 如果你使用的是Bootstrap 4，原生没有内置全屏模态框类，可以添加如下自定义CSS实现全屏效果，之后给.modal-dialog添加modal-fullscreen类即可：

.modal-fullscreen {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100vh;
  border: 0;
  border-radius: 0;
}

• 第三步：如果调整后仍有尺寸限制，按F12打开开发者工具审查.modal-dialog元素，检查是否有自定义CSS设置了max-width、width等限制属性，删除冲突样式即可。

修正后的代码结构示例 #

<body>
  <!-- 页面内容区域 -->
  <div class="site-section">
    <div class="container">
      <div class="row align-items-center mr-5">
        <div class="col-lg-6 py-5 px-5">
          <img src="assets/img/bee.jpg" alt="image" class="img-fluid rounded" style="width:500px;height:500px;">
        </div>
        <div class="col-lg-6 pl-lg-5 ">
          <h3 class="mt-4 font-weight-bold">About Us</h3>
          <p class="text-justify pt-0 mr-5">是一家和非宗派事工合作的出版公司。</p>
          <!-- 模态框触发按钮保留在原位置即可 -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            查看更多
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 模态框移到所有内容容器外部，body闭合前 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"  aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
          <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          模态框内容
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">保存修改</button>
        </div>
      </div>
    </div>
  </div>
</body>

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