Bootstrap v5.1 模式不从 <body> 中删除滚动条

Question

我在 Angular 11 中有一个项目，我使用 Bootstrap(v5.1.3)。我试图点击一张卡片（就好像它是一个博客 post）来打开一个 Bootstrap 模式并显示 post 的内容。这是我的 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" alt="Card image cap" 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" alt="Card image cap">
        <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) 的文档，在显示模式时应删除滚动条。模式像卡片一样正确显示，但是当打开模式时，它会在 17px 的右侧引入一个填充并且不会阻止滚动...为什么它不起作用？

Answer 1

使用自定义 CSS :

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

Answer 2

我解决了这个问题，在我的通用 styles.css:

中删除了这一行

html { 
overflow-x: hidden; 
}

可能是因为这个输入与 bootstrap 的某些默认样式冲突，所以才有效。

Bootstrap v5.1 模式不从 <body> 中删除滚动条

Bootstrap v5.1 modal don't remove scroll from the <body>

html

css

bootstrap-modal

bootstrap-5

bootstrap5-modal