bootstrap 带有粘顶 class 模态显示的意外边距和填充

Question

当我打开 bootstrap 模式时，我在某些 html 标签上出现意外的侧边距或边距。

一个例子：

显示模态之前：

<div id="fixedMenu" class="d-none container-fluid menu sticky-top px-0" style="">
    ...
</div>

显示模态后：

<div id="fixedMenu" class="d-none container-fluid menu sticky-top px-0" style="padding-right: 15px; margin-right: -15px;">
    ...
</div>

padding-right: 15px; margin-right: -15px; 以属性.

的风格出现

另一个例子：

显示模态之前：

<form class="sticky-top sticky-top-filters" id="filters" style="">
    ...
</form>

模特秀后：

<form class="sticky-top sticky-top-filters" id="filters" style="padding-right: 39px; margin-right: -15px;">
    ...
</form>

padding-right: 39px; margin-right: -15px; 以属性.

的风格出现

什么可以解释 bootstrap 模态的这种行为？

更新

我刚刚发现是 class sticky-top 导致了这个问题，当我删除它时，问题消失了。（但我需要这个class）

Answer 1

我从这个post得到了答案：

https://github.com/twbs/bootstrap/issues/27071

首先，捕获模态事件以应用样式：

$('body').on('show.bs.modal', function () {
    $('.sticky-top').addClass("fixModal");
});
$('body').on('hidden.bs.modal', function () {
    $('.sticky-top').removeClass("fixModal");
});

第二次添加新的类样式：

.fixModal {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

bootstrap 带有粘顶 class 模态显示的意外边距和填充

Unexpected margin and padding on bootstrap modal show with sticky-top class

html

javascript

css

bootstrap-modal

bootstrap-4

一个例子：

另一个例子：