Html 引导4模式向左移动页面
当我打开页面上的Boostrap 4模式时，页面内容会稍微向左移动。通过在打开模式时向主体添加css类，我成功地防止了大多数内容出现这种情况。但是，由于某些原因，这对我的导航内容不起作用，并且当模式打开时，它们仍会向左移动。我怎样才能解决这个问题？任何帮助都会很好，谢谢 HTML CSSHtml 引导4模式向左移动页面,html,jquery,css,bootstrap-4,bootstrap-modal,Html,Jquery,Css,Bootstrap 4,Bootstrap Modal,当我打开页面上的Boostrap 4模式时，页面内容会稍微向左移动。通过在打开模式时向主体添加css类，我成功地防止了大多数内容出现这种情况。但是，由于某些原因，这对我的导航内容不起作用，并且当模式打开时，它们仍会向左移动。我怎样才能解决这个问题？任何帮助都会很好，谢谢 HTML CSS 当试图找到此类错误的原因时，我所做的是删除所有页面CSS（对其进行注释或重命名CSS文件并创建一个空白），然后开始按块或重要性取消注释/添加CSS规则（例如，您可能要添加的第一个CSS文件是boostrap C
当试图找到此类错误的原因时，我所做的是删除所有页面CSS（对其进行注释或重命名CSS文件并创建一个空白），然后开始按块或重要性取消注释/添加CSS规则（例如，您可能要添加的第一个CSS文件是boostrap CSS文件）反复测试，直到我找到凶手 我的第二个建议是做相反的事情，创建一个空白页面，开始从最重要到最不重要添加代码（html、css、javascript）（首先是jquery，然后是boostrap，引导空白页面html，模态示例…）
与javascript相同，因为有时javascript也会更改CSS，特别是如果您有javascript插件，通常情况下，当页面高度增加并显示垂直滚动条时，会发生这种情况。滚动条会导致重新计算页面的中心，并且内容会稍微向左移动。
<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');
})
.test[style] {
padding-right: 0 !important;
color: red;
}
.test.modal-open {
overflow: auto !important;
}
body.modal-open {
margin-right: 0px
}