Html 引导模式窗口在关闭时移动导航栏

每当我打开和关闭一个

引导

模式窗口

，我的

引导导航栏

就会移到一边。我如何防止这种情况发生，或者在

模式

关闭后，是否可以将

导航栏

重置回正确的尺寸

我创建了一个试用编辑器来举例说明这个问题。只需打开并关闭

模式

，然后查看

导航栏的右侧

如果您不喜欢试用编辑器，下面是

html

示例：

函数openModal（）{
$（#modalPop”）.modal（“show”）；
}

.tableOne{
填充：2px；
边界：0px；
边界间距：0px；
边界塌陷：塌陷；
宽度：100%；
高度：35px；
背景色：#0099cc；
颜色：白色；
字体大小：粗体；
字体大小：40px；
文本缩进：20px；
}
表二{
填充：2px；
边界：0px；
边界间距：0px；
边界塌陷：塌陷；
文本对齐：右对齐；
宽度：100%；
}
.时差{
文本缩进：8px；
宽度：130px；
}
.tdTwo{
文本缩进：20px；
垫底：8px；
文本对齐：右对齐；
颜色：白色；
字体大小：粗体；
字体风格：普通；
字体大小：35%；
}
.textOne{
颜色：白色；
字号：28px；
字体大小：正常；
}
.linkOne{
颜色：白色；
文字装饰：无；
字体大小：12px；
}

附带问题示例
附带问题示例








这里是一些页面内容。



情态动词
&时代；								        
这是一个模态窗口。
接近

当您打开并关闭模式时，它正在将导航类填充设置为16px，只需设置为padding:0px！重要或正确：0px！重要的是，引导不会因为某种原因覆盖此样式，当模式隐藏时，

.navbar

获取新的填充值，从而导致navbar移动

解决此问题的一种方法是在关闭模式时添加事件侦听器，并设置默认填充，使其不会移动：

<script>
function openModal() {
    $("#modalPop").modal("show");
}

    $(function() { //we have to wait for the DOM to be ready otherwise it won't work
        $('#modalPop').on('hidden.bs.modal', function (e) { //listen to the modal closed event
            $('nav.navbar').attr('style', 'background-color: #ff5733;padding:0;'); //set the default background-color and padding to prevent the shifting phenomenon 
        })


    });     

函数openModal（）{
$（#modalPop”）.modal（“show”）；
}
$（function（）{//我们必须等待DOM准备就绪，否则它将无法工作
$（'#modalPop'）.on（'hidden.bs.modal'，函数（e）{//侦听模式关闭事件
$（'nav.navbar'）.attr（'style'，'background color:#ff5733；padding:0；'）；//设置默认的背景色和padding以防止移位现象
})
});     

示例如下：

附带问题示例
函数openModal（）{
$（#modalPop”）.modal（“show”）；
}
$（函数（）{
$（'#modalPop'）.on（'hidden.bs.modal'，函数（e）{
$（'nav.navbar'）.attr（'style'，'background color:#ff5733；padding:0；'）；
})
});		
.表一{
填充：2px；
边界：0px；
边界间距：0px；
边界塌陷：塌陷；
宽度：100%；
高度：35px；
背景色：#0099cc；
颜色：白色；
字体大小：粗体；
字体大小：40px；
文本缩进：20px；
}
表二{
填充：2px；
边界：0px；
边界间距：0px；
边界塌陷：塌陷；
文本对齐：右对齐；
宽度：100%；
}
.时差{
文本缩进：8px；
宽度：130px；
}
.tdTwo{
文本缩进：20px；
垫底：8px；
文本对齐：右对齐；
颜色：白色；
字体大小：粗体；
字体风格：普通；
字体大小：35%；
}
.textOne{
颜色：白色；
字号：28px；
字体大小：正常；
}
.linkOne{
颜色：白色；
文字装饰：无；
字体大小：12px；
}
附带问题示例








这里是一些页面内容。



情态动词
&时代；								        
这是一个模态窗口。
接近
header {
    position: sticky;
    top: 0;
}

body.modal-open {
    padding-right: 0px !important;
}

.navbar {
    padding-right: 16px !important;
}