对于我的注册域名，我几乎已经完成了一个简单的2页网站。不幸的是，我有一个小问题，我似乎无法解决：当Twitter Bootstrap模式打开和关闭时，一个跳跃的标题。在移动设备上没有问题。该问题仅发生在台式机和笔记本电脑等较大的视口中。
检查下图（Opera，Safari，Firefox和Chrome中的结果相同）：
http://www.domains.cloudlabz.nl/domains
打开/关闭模态时，我希望标题停止跳跃。滚动条消失的事实不是问题。实际上，我希望它保持这样。
我注意到跳转标题只出现在固定位置元素上，例如我的标题（添加了Bootstrap类navbar-fixed-top）。它甚至发生在Bootstrap网站上：Jumping header issue http://i58.tinypic.com/opp99l.gif。转到桌面上的“Modals> Optional Sizes”区域，然后单击其中一个按钮。你会看到右侧菜单来回跳跃。
当模态打开时，类.modal-open被添加到body元素中（感谢指出@Pred）。它在右侧添加了15px的填充，与滚动条装订线的宽度相同。这可以防止身体来回跳跃。
不幸的是，这种填充显然不适用于固定元素。
当模态显示时，Bootstrap将http://getbootstrap.com/javascripts和class="modal-open"添加到padding-right: 15px;。要删除右移并保持滚动条将其添加到您的CSS：
body尝试在bootstrap 3.3.4
我有一个结构：
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
var headerPad = parseInt(($('.navbar-fixed-top').css('padding-right') || 0), 10)
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
if (this.bodyIsOverflowing) $('.navbar-fixed-top').css('padding-right', headerPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '')
$('.navbar-fixed-top').css('padding-right', '')
}
我正在使用这个CSS：
<html>
<body>
<nav class="navbar navbar-fixed-top">...</nav>
<section>
<div class="container">...</div>
</section>
<section>
<div class="container">...</div>
</section>
<footer>...</foter>
</body>
</html>
将以下内容添加到CSS中：
body.modal-open {padding-right: 0 !important}
body.modal-open nav,
body.modal-open section,
body.modal-open footer {padding-right: 17px !important}
对于Bootstrap 4 body {
overflow: inherit;
padding-right: 0 !important;
}
，请使用以下代码段。测试了此页面上的所有CSS解决方案，但没有一个适用于Bootstrap 4。
sticky-top我的页面设计如下
<script type="text/javascript">
$('body').on('show.bs.modal', function () {
$('.sticky-top').css('margin-left', '-=0px');
});
$('body').on('hidden.bs.modal', function () {
$('.sticky-top').css('margin-left', 'auto');
});
</script>
在我的例子中，它可以通过添加注释或在bootstrap.css文件中删除这两行<header class="container">
<div class="row">
</div>
</header>
<div class="container sticky-top">
<nav class="navbar navbar-expand-lg">
This div jumped/shifted 17px to the right when opening a modal
</nav>
</div>
和right: 0;来解决：
left: 0;注意：我使用bootstrap v3.3.7
我似乎已经找到了解决问题的快速方法。它使用一段javascript为标题添加额外的样式（15px padding-right）以防止它跳跃。这可能不是最好的解决方案，但现在它的工作正常。
由于在小于768px（移动）的视口上没有问题，这段代码只会将额外的15px添加到更大的视口，如台式机和笔记本电脑
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
如果你知道一个更好的解决方案（最好只有CSS3），请告诉我。感谢您的帮助！
当模态打开时，“模态打开”类被添加到隐藏溢出的HTML <script>
$(document).ready(function(){
// Dirty fix for jumping scrollbar when modal opens
$('#requestModal').on('show.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","15px");
}
});
$('#requestModal').on('hide.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","0px");
}
});
});
</script>
元素中。你可以通过用<body>覆盖“modal-open”类来改变这种情况。这将使滚动条保持在视图中，就像模式关闭时一样。请记住，只要在页面上打开任何模态，这将更改溢出选项。希望这可以帮助。祝好运！
所有这些都是因为bootstrap.js中的这部分代码而发生的：
overflow: inherit这个恼人的问题发生在Firefox 32.0（Gecko / 20100101）和Chromium Version 37.0.2062.94（Webkit 537.36）（Ubuntu 14.04）中。在QupZilla版本1.6.6（WebKit 537.21）中不会发生。
对我来说，脏修复是评论条件行，之后它适用于我测试的所有浏览器（包括一些Android的浏览器）。
注意：如果您对该行进行注释，则应该小心模式的大小，因为bootstrap不会为新滚动条创建足够的空间。
问候。
正如您通常将Bootstrap Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
作为navbar容器的直接子项：
body您可以使用在Bootstrap核心代码中计算的<body>
<nav class="navbar navbar-fixed-top">...</nav>
</body>
body值来防止它在打开模态窗口时“跳跃”，以修复padding-right问题。纯CSS解决方案如下：
navbar很简单。
只有当您知道页面内容比视口长时（因此任何长滚动页面），此方法才有效。您只需将以下内容添加到CSS中即可 -
.navbar-fixed-top {
padding-right: inherit;
}
另一个解决方案是添加：
html {
overflow-y: scroll;
}
.modal-open {
padding-right: 0!important;
}
防止其内容跳跃。再一次，这很容易。
我遇到了同样的问题，我解决了如下问题
加上
.modal-open .navbar-fixed-top {
overflow-y: scroll;
}
我手动更改bootstrap.js：
在改变之前
body.modal-open {
position: fixed;
overflow: scroll;
width: 100%;
padding-right: 0!important;
}
改变后：
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '')
}