时间戳

首页 > 解决方案 > Bootstrap 4 Modal 向左移动页面

html - Bootstrap 4 Modal 向左移动页面

问题描述

当我在我的页面上打开 Boostrap 4 Modal 时，它会将页面内容稍微向左移动。我已经设法通过在打开模式时向正文添加一个 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>

JS

$('#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
}

标签： htmljquerycssbootstrap-4bootstrap-modal

解决方案

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

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

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

推荐阅读