引导全屏模式不工作时，试图实现它与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">

To this:

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

还要确保你有Bootstrap版本5安装在您的laravel项目中。全屏模式默认只包含在Bootstrap 5中，而不包括在之前的模式中:https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal