带有粘性顶级类的引导模式显示上的意外边距和填充答案

【问题标题】：Unexpected margin and padding on bootstrap modal show with sticky-top class带有粘性顶级类的引导模式显示上的意外边距和填充
【发布时间】：2021-08-19 10:21:04
【问题描述】：

当我打开 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; 出现在 style 属性中。

另一个例子：

在显示模态之前：

<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; 出现在 style 属性中。

什么可以从引导模式解释这种行为？

更新

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

【问题讨论】：

是的，我曾经遇到过同样的问题，有时我会在它导致居中问题时覆盖它。

标签： javascript html css bootstrap-4 bootstrap-modal

【解决方案1】：

我从这篇文章中得到了一个答案：

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;
}

【讨论】：