Bootstrap v5.1 模态不会从 <body> 中删除滚动
Posted
技术标签:
【中文标题】Bootstrap v5.1 模态不会从 <body> 中删除滚动【英文标题】：Bootstrap v5.1 modal don't remove scroll from the <body> 【发布时间】：2022-01-15 19:41:47 【问题描述】：我在 Angular 11 中有一个项目，我使用 Bootstrap(v5.1.3)。我正在尝试单击一张卡片（就好像它是一篇博客文章一样）以打开一个引导模式并显示文章的内容。 这是我的 Angular 组件的 html：
<div class="container">
<!--Card-->
<div class="card" style="width: 18rem" *ngFor="let post of posts">
<a class="cardLink" data-bs-toggle="modal" data-bs-target="#postsModal" (click)="onLoadModal(post.idPost)">
<img class="card-img-top" src="../../assets/buckupimg.webp" loading="lazy" />
<div class="card-body">
<h5 class="card-title"> post.title </h5>
<div>
<p class="align-left card-text">Autor: post.id_user.username </p>
<p class="align-right card-text">Visitas: post.views </p>
</div>
</div>
</a>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="postsModal" tabindex="-1" aria-labelledby="postsModal" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="postsModalTitle">postContent.title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="../../assets/buckupimg.webp" >
<p>postContent.content</p>
</div>
<div class="modal-footer">
<p>Views: postContent.views</p>
<p>Autor: postContent.id_user.username</p>
</div>
</div>
</div>
</div>
根据最新版本的 Bootstrap (v5.1.3) 的文档，在显示模式时应该移除滚动。 modal 像卡片一样正确显示，但是当打开 modal 时，它会在 17px 的右侧引入一个填充，并且不会阻塞滚动...为什么它不起作用？
【问题讨论】：
【参考方案1】：我解决了这个问题，删除了我的通用 styles.css 中的这一行：
html
overflow-x: hidden;
也许是因为这个输入与一些默认的引导风格相冲突，使这个工作正常。
【讨论】：
【参考方案2】：使用自定义 CSS：
body
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
【讨论】：
感谢您的回答。但不幸的是，这对我不起作用。使用元素检查器，我看到打开模式时已经应用了溢出：隐藏。 imgur.com/rTHcjt9以上是关于Bootstrap v5.1 模态不会从 <body> 中删除滚动的主要内容，如果未能解决你的问题，请参考以下文章