Bootstrap 4 Modal 向左移动页面答案

【问题标题】：Bootstrap 4 Modal Moving page to leftBootstrap 4 Modal 向左移动页面
【发布时间】：2021-08-14 20:29:34
【问题描述】：

当我在我的页面上打开 Boostrap 4 模式时，它会将页面内容稍微向左移动。我已经设法通过在打开模式时向正文添加一个 css 类来防止这种情况发生在大多数内容上。但是，由于某种原因，这不适用于我的导航内容，并且当模式打开时它们仍会向左移动。我怎样才能解决这个问题？任何帮助都会很棒，谢谢。

HTML

<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navFixed">
    <div class="container-fluid container">
        <a class="navbar-brand" href="javascript:void(0);" onclick="navigateToPage()">
            MyNav
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);" onclick="navigateToPage()" title="Home">Home</a>
                </li>
                ...
             </ul>
        </div>
    </div>
</nav>

...
</body>

$('#demoModal').on('show.bs.modal', function (e) {
    $('body, nav > .container').addClass('test');
})

CSS

.test[style] {
  padding-right: 0 !important;
  color: red;
}

.test.modal-open {
  overflow: auto !important;
}

body.modal-open {
  margin-right: 0px
}

【问题讨论】：

通常在页面高度增加并显示垂直滚动条时会发生这种情况。滚动条导致页面中心重新计算，内容似乎向左轻微移动。

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

【解决方案1】：

当试图找到这种错误的原因时，我所做的是删除所有页面 CSS（注释它或重命名 css 文件并创建一个空白文件）然后开始按块或重要性取消注释/添加 css 规则（例如，您可能要添加的第一个是 boostrap css 文件）并测试并重复，直到我找到罪魁祸首

我的第二种方法是做相反的事情，创建一个空白页面并开始添加代码（html、css、javascript），从最重要到最不重要（首先 jquery 然后 boostrap、引导空白页 html、模态示例...)

与 javascript 相同，因为有时 javascript 也会更改 CSS，特别是如果您有 javascript 插件

【讨论】：