如果我打开一个模态对话框，通过Twitter Bootstrap，我注意到它将页面的所有html内容（即container）向左推了一点，然后把它放到关闭后恢复正常。然而，这仅在浏览器宽度足够大以至于不在“移动”（即，最小）媒体查询上时才会发生。最新版本的FF和Chrome（未测试其他浏览器）会出现这种情况。
您可以在此处查看问题：http://jsfiddle.net/jxX6A/2/
注意：您必须增加“结果”窗口的宽度，以便切换到“med”或“large”媒体查询css。
我根据Bootstrap网站上显示的示例设置了页面的HTML：
<div class='container'>
<div class='page-header'>
<h4>My Heading</h4>
</div>
<div id='content'>
This is some content.
</div>
<div class='footer'>
<p>© 2013, me</p>
</div>
</div>
我猜这不应该发生，但我不确定我做错了什么。
编辑：这是一个已知错误，有关更多（和最新）的信息，请参阅：https://github.com/twbs/bootstrap/issues/9855
答案 0 :(得分：39)
对于bootstrap 3.x.x。
我找到了一个解决方案，可以使用 100％CSS而不是JavaScript 。
诀窍是，在html内容的滚动条上显示modal的滚动条。
CSS：
html {
overflow: hidden;
height: 100%;
}
body {
overflow: auto;
height: 100%;
}
/* unset bs3 setting */
.modal-open {
overflow: auto;
}
这是一个在线示例：http://jsbin.com/oHiPIJi/43/
我在Windows 7上用以下方法测试它：
我可以在IE上找到一个新的小问题：
IE使用鼠标滚轮滚动背景（= body），如果没有其他内容滚动在前景中。
关心position:fixed！
由于此变通办法的性质，您需要额外注意固定元素。
例如，“navbar fixed”的填充需要设置为html而不是body（如何描述in bootstrap doc）。
/* only for fixed navbar:
* extra padding stetting not on "body" (like it is described in doc),
* but on "html" element
* the used value depends on the height of your navbar
*/
html {
padding-top: 50px;
padding-bottom: 50px;
}
使用包装器替代
如果你不喜欢在overflow:hidden上设置html（有些人不想这样，但它有效，有效且100％符合标准），你可以包含{{1}的内容1}}在一个额外的div。
您不需要额外注意固定元素，您可以像以前一样使用它。
body这是一个例子：http://jsbin.com/oHiPIJi/47/
<强>更新
Bootstrap中的问题：
更新2：仅供参考
在Bootstrap 3.2.0中，他们向body, html {
height: 100%;
}
.bodywrapper {
overflow: auto;
height: 100%;
}
/* unset bs3 setting */
.modal-open {
overflow: auto;
}
/* extra stetting for fixed navbar, see bs3 doc
*/
body {
padding-top: 50px;
padding-bottom: 50px;
}
添加了一种解决方法，该解决方法尝试在modal.js，modal.prototype.show()和Modal.prototype.hide()的每次调用中处理Javascript问题。他们为此添加了7个（！）新方法。现在约来自Modal.prototype.resize()的代码中只有20％尝试处理这些问题。
答案 1 :(得分：38)
试试这个：
body.modal-open {
overflow: auto;
}
body.modal-open[style] {
padding-right: 0px !important;
}
.modal::-webkit-scrollbar {
width: 0 !important; /*removes the scrollbar but still scrollable*/
/* reference: http://stackoverflow.com/a/26500272/2259400 */
}
答案 2 :(得分：14)
它实际上是由bootstrap.css中的以下规则引起的：
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 15px;
}
我不确定为什么它表现得那样（可能以某种方式考虑滚动条）但你可以改变这种行为：
body.modal-open {margin-right: 0px}
编辑：实际上，这是bootstrap中报告的问题：https://github.com/twbs/bootstrap/issues/9855
答案 3 :(得分：6)
当模型打开时，身体右侧有一个17px的填充。下面的代码应解决该问题。
body {
padding-right: 0px !important;
}
答案 4 :(得分：4)
这是user yshing在使用Bootstrap v3.1.1和Google Chrome {{}时为我提供的确实 FIXED 的解决方案1}}。有关此问题的修复来自GitHub issue thread：
35.0.1916.114m该修复程序仅在Bootstrap 3.2 as desbribed by mdo中着陆。
答案 5 :(得分：3)
你只需编辑.modal-open类窗体bootstrap.min.css文件，我就可以了，它会没问题.modal-open{overflow:auto}
溢流：隐藏在那里设置，你只需设置溢流：自动。
答案 6 :(得分：3)
我遇到了同样的问题，并遵循解决方案
.modal-open {
overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
padding-right:0px!important;
}
答案 7 :(得分：3)
为防止页面在类似情况下移动 - 例如手风琴开口超过页面底部 - 我在CSS中添加：
body {
overflow-y: scroll;
height: 100%;
}
overflow-y: scroll强制滚动条始终显示。说实话，我不记得为什么我把height:100%放在那里......但是你似乎并不需要这个问题。
演示：http://jsfiddle.net/jxX6A/8/
还有一点动静。但这似乎出现在Bootstrap自己的示例页面上：http://getbootstrap.com/javascript/#modals
所以我猜你已经坚持了......但它仍然比你最初看到的要好得多。
编辑：我可能会担心添加这些样式会干扰其他Bootstrap的内容，因为我自己没有使用它，所以你可能需要仔细检查它。
答案 8 :(得分：2)
自bootstrap 3.3.6以来发生了很多变化，因此上述解决方案可能还不够。
要解决此问题，请查看bootstrap.js中的setScrollbar函数（当然还有bootstrap-min.js），您会立即注意到bootstrap正在向body元素添加padding-right，将其值设置为已解决的值scrollbarWidth加上正文上现有的padding-right（如果没有则为0）。
如果你注释掉下面的
//this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
在你的css覆盖bootstrap modal-open类中使用下面的
.modal-open{
overflow:inherit;
}
有人提出overflow-y: scroll;问题是，如果首先不存在滚动条，则内容会发生变化。
NB 根据{{3}}，始终尝试将模式的HTML代码放在文档的顶级位置
答案 9 :(得分：1)
此处没有解决方案解决了我的问题。但是跟随Css我从Github那里为我工作了。
body.modal-open {
padding-right: 0px !important;
overflow-y: auto;
}
答案 10 :(得分：1)
只需简单地执行此操作即可。
.modal-open {
padding-right: 0 !important;
}
适合我。简短并完成工作。
答案 11 :(得分：1)
我有同样的问题，我得到的解决方案对我有用....
body .modal-open {
padding-right: 0% !important;
overflow-y: auto;
}
将此代码放在style.css文件
答案 12 :(得分：1)
我使用Bootstrap v3.3.4看到这个问题，我明白Bootstrap模式将17px填充添加到正文中，所以只需使用以下代码：
body {
padding-right: 0 !important;
}
答案 13 :(得分：1)
在TB问题中找到了这个答案
只需添加以下css即可修复小动作
body, .navbar-fixed-top, .navbar-fixed-bottom {
margin-right: 0 !important;
}
答案 14 :(得分：0)
尝试更改下面的所有出现
$body.css('padding-right',XXX)
与
$body.css('padding-right'0)
在你的bootstrap.js文件上。
全部......
答案 15 :(得分：0)
我真的不喜欢所提供的任何解决方案，并使用它们的组合（以及我以前用于qTip模式的修复）来为Bootstrap v3.3.7提供最适合我的东西。< / p>
更新：解决了iOS上固定导航栏定位的问题。
<强> CSS：
/* fix issue with scrollbars and navbar fixed movement issue with bootstrap modals */
html {
overflow-y: scroll !important;
}
html.noscroll {
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
}
.modal-open .modal {
padding-right: 0 !important;
}
.modal-open[style] {
padding-right: 0px !important;
}
.modal::-webkit-scrollbar {
width: 0 !important; /*removes the scrollbar but still scrollable*/
}
/* end modal fix */
<强> JavaScript的：
/* fix for modal overlay scrollbar issue */
$(document).ready(function() {
var curScrollTop;
var prevScrollTop;
$('.modal').on('show.bs.modal', function() {
curScrollTop = $(window).scrollTop();
$('html').addClass('noscroll').css('top', '-' + curScrollTop + 'px');
$('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop});
$(window).on("resize", function() {
var bodyH = $("body").height();
var winH = $(window).height();
if (winH > bodyH) {
prevScrollTop = curScrollTop;
curScrollTop = 0;
$('.navbar-fixed-top').css({'position':'absolute','top':'0'});
}
else {
$('html').removeClass("noscroll");
if (curScrollTop == 0) window.scrollTo(0, prevScrollTop);
else window.scrollTo(0, curScrollTop);
curScrollTop = $(window).scrollTop();
$('.navbar-fixed-top').css({'position':'absolute','top':curScrollTop});
$('html').addClass("noscroll");
}
$('html').css('top', '-' + curScrollTop + 'px');
})
})
$('.modal').on('hide.bs.modal', function() {
$('html').removeClass("noscroll");
$('.navbar-fixed-top').css({'position':'fixed','top':'0'});
window.scrollTo(0, curScrollTop);
$(window).off("resize");
})
})
这允许背景“固定”但仍然允许模态可滚动，解决了双滚动条的问题以及固定导航栏的重新定位。
请注意，当模态关闭时，还有其他代码可以记住“滚动”位置（并返回到它）。
希望这可以帮助其他任何想要实现我的目标的人。
答案 16 :(得分：0)
对于仍在努力解决这个问题的人 - 最新版本的Bootstrap有一个本机修复程序。只需从最新版本更新bootstrap.min.css和bootstrap.min.js文件即可。
答案 17 :(得分：0)
这是一个报告的引导问题：https://github.com/twbs/bootstrap/issues/9855
这是我的临时快速修复，它使用固定的顶部导航栏，只使用javascript。将此脚本与您的页面一起加载。
$(document.body)
.on('show.bs.modal', function () {
if (this.clientHeight <= window.innerHeight) {
return;
}
// Get scrollbar width
var scrollbarWidth = getScrollBarWidth()
if (scrollbarWidth) {
$(document.body).css('padding-right', scrollbarWidth);
$('.navbar-fixed-top').css('padding-right', scrollbarWidth);
}
})
.on('hidden.bs.modal', function () {
$(document.body).css('padding-right', 0);
$('.navbar-fixed-top').css('padding-right', 0);
});
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
以下是工作示例：http://jsbin.com/oHiPIJi/64
答案 18 :(得分：0)
如果以上所有解决方案都不起作用，可能是因为定位了内容，只需看一下模态的位置
s1答案 19 :(得分：0)
我解决了我的问题，我认为它适用于所有人。 在bootstrap.js中有一行：
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
这意味着在某些情况下，Bootstrap会在打开模态时添加滚动条右边的填充权限。所以@pmanOnu是正确的一半，但不要删除整行代码但只有
使用bodyPad + this.scrollbarWidth
0
使Bootstrap添加0px的填充权（与不添加相同）。
然后将.modal-open {overflow: initial;}添加到自定义css中，以防止Bootstrap在打开模式时禁用滚动条。
答案 20 :(得分：0)
事实证明我实际上得到了250px左右的正确边距。我的问题似乎是.modal-open被定位到固定的位置，无论出于何种原因，这都是原因。所以在我的情况下，修复是类似的，但我将位置值设置为默认值，如下所示：
.modal-open{ position: initial !important;}
答案 21 :(得分：0)
我遇到了同样的问题，以下解决方案适用于我
.modal-open {
overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
padding-right:0px!important;
}
答案 22 :(得分：0)
只需添加一个类
.modal-open{ padding-right:0px !important;}
它对我有用
答案 23 :(得分：-1)
这对我有用。覆盖添加到正文右侧的17px填充：
body.modal-open {
padding-right: inherit !important;
}
答案 24 :(得分：-1)
我找到了Agni Pradharma为我工作的答案;但不完全是在Chrome中。
看来文档滚动条比其他元素滚动条宽;所以我编辑了getScrollBarWidth函数。
首先检查宽度;删除文档滚动条;然后比较差异。它的代码也少得多。
$(document.body)
.on('show.bs.modal', function () {
if (this.clientHeight <= window.innerHeight) {
return;
}
// Get scrollbar width
var scrollbarWidth = getScrollBarWidth()
if (scrollbarWidth) {
$(document.body).css('padding-right', scrollbarWidth);
$('.navbar-fixed-top').css('padding-right', scrollbarWidth);
}
})
.on('hidden.bs.modal', function () {
$(document.body).css('padding-right', 0);
$('.navbar-fixed-top').css('padding-right', 0);
});
function getScrollBarWidth () {
var fwidth = $(document).width();
$('html').css('overflow-y', 'hidden');
var swidth = $(document).width();
$("html").css("overflow-y", "visible");
return (swidth - fwidth);
};
答案 25 :(得分：-1)
这里使用的是，只要您不介意强制使用滚动条，我就会在Bootstrap 3.2.0中100％工作。
.modal-open .modal {
overflow-x: hidden;
overflow-y: scroll;
}
答案 26 :(得分：-1)
最好的方法是：
添加到BODY overflow-y: scroll
并从bootstrap.js中删除4个函数 -
checkScrollbar
setScrollbar
resetScrollbar
measureScrollbar
答案 27 :(得分：-1)
我通过TBAG
进一步调整了这个问题body.modal-open {padding-right：0px！important; overflow-y：auto; }
通过小调整可以在桌面上运行，因为移动设备溢出设置为隐藏
最终代码
body.modal-open { padding-left: 16px!important; overflow-y: auto; }
希望这有帮助！
答案 28 :(得分：-1)
对我来说，它可以正常工作
.modal-open .modal {
overflow-x: scroll;
overflow-y: scroll;
}
答案 29 :(得分：-1)
对我而言，以下似乎有效 - 在Linux上测试了Firefox和Chrome：
body.modal-open {
overflow: inherit;
padding-right: inherit !important;
}