尝试使用 Laravel 实现时，引导全屏模式不起作用

Question

我正在尝试使用全屏模式显示我的关于页面的一部分，但模式仅在一小部分中打开/显示。当我使用“modal-dialog modal-lg”时，它只会打开一点点，但除此之外它不会扩展。谁能帮我解决这个问题？

<!--1-->

  <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"> is a publishing company working with a non- denominational ministry. 
        
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Load More
</button>

  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"  aria-hidden="true">
   <div class="modal-dialog modal-fullscreen-xxl-down">
   <div class="modal-content">
   <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</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">Save changes</button>
  </div>
</div>
 </div>
</div>
     </div>
    </div>

Answer 1

尝试改变你的引导类：

<div class="modal-dialog modal-fullscreen-xxl-down">

到这里：

<div class="modal-dialog modal-fullscreen">

还要确保您的 laravel 项目中安装了 Bootstrap 版本 5。默认情况下，全屏模式仅包含在 Bootstrap 5 中，而不包含在以前的模式中：https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal