Twitter Bootstrap模式将html内容推送到左侧
如果我打开一个模式对话框，通过Twitter Bootstrap，我注意到它将页面的所有html内容（即container ）左移一点，然后在closures之后将其恢复正常。 但是，这只有在浏览器宽度足够大以至于不在“移动”（即最小）媒体查询时才会发生。 这发生在FF和Chrome的最新版本（还没有testing过其他浏览器）。
你可以在这里看到这个问题： 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
对于bootstrap 3.xx
我find了一个解决scheme，与100％的CSS和没有JavaScript的作品 。
诀窍是，在html内容的滚动条上显示模式的滚动条。
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上testing它：
- 火狐27.0
- Chrome 32.0.1700.107米
- IE 11浏览器模式8,9,10，边缘（桌面）
- 浏览器模式下的IE 11，9，10，Edge（windows phone）
用IE浏览器可以find一个新的小问题：
IE有背景（=正文）滚动鼠标滚轮，如果没有更多的滚动在前台。
关心position:fixed ！
由于此解决方法的性质，您需要特别注意固定的元素。 例如“navbar fixed”的填充需要设置为html而不是body （ 在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％的标准兼容），你可以包裹在一个额外的body的内容。
比你不需要额外的固定元素的照顾，你可以像以前一样使用它。
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; }
这里是一个例子： http : //jsbin.com/oHiPIJi/47/
更新：
Bootstrap中的问题：
- ＃12627
- ＃9855
更新2：FYI
在Bootstrap 3.2.0中，他们向modal.js添加了一个解决方法，该方法尝试使用每个modal.prototype.show() ， Modal.prototype.hide()和Modal.prototype.resize()调用来处理Javascript的问题。 他们添加了7（！）新的方法。 现在约。 来自modal.js 20％的代码只是试图处理这个问题。
尝试这个：
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 */ }
它实际上是由bootstrap.css中的以下规则引起的：
body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 15px; }
我不完全确定为什么它的行为（也许以某种方式来说明滚动条），但你可以改变这种行为：
body.modal-open {margin-right: 0px}
编辑：其实，这是在引导报告的问题： https ： //github.com/twbs/bootstrap/issues/9855
这里是用户yshing提出的修复，在使用Bootstrap v3.1.1和谷歌浏览器35.0.1916.114m时，我确实修复了这个35.0.1916.114m 。 解决方法来自GitHub 问题线程关于这个问题：
.modal { overflow-y: auto; } .modal-open { overflow:auto; overflow-x:hidden; }
这个修复程序只会被mdo所剥夺的 Bootstrap 3.2 所有 。
当模型打开时，身体右侧的一个17px的填充。 下面的代码应该可以解决这个问题。
body { padding-right: 0px !important; }
为了防止页面在类似的情况下移动，例如手风琴开口超过了页面的底部，我在CSS中添加了这个：
body { overflow-y: scroll; height: 100%; }
overflow-y: scroll强制滚动条一直呈现。 说实话，我不记得为什么我把height:100%放在height:100%的位置……但是你似乎并不需要这个问题。
演示： http : //jsfiddle.net/jxX6A/8/
还有一点动静。 但是这似乎是在Bootstrap自己的示例页面上： http : //getbootstrap.com/javascript/#modals
所以，我猜你已经陷入了困境……但是，它仍然比你最初看到的要好得多。
编辑：我可能会担心添加这些样式会干扰其他Bootstrap的东西，因为我没有使用它自己，所以你可能要仔细检查。
你只需编辑.modal-open类forms的bootstrap.min.css文件，我就瘦了就行了.modal-open{overflow:auto}
溢stream：隐藏设置在那里，你只需设置溢stream：自动。
我面临同样的问题和解决scheme
.modal-open { overflow: visible; } .modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { padding-right:0px!important; }
bootstrap 3.3.6以来有很多改变，所以上面的解决scheme可能不够用。
为了解决这个问题，看看bootstrap.js中的setScrollbar函数（或者当然是bootstrap-min.js），你会立刻注意到引导程序正在向body元素添加padding-right，将其值设置为scrollbarWidth plus现有的填充 – 正确的身体（或0，如果没有）。
如果你注释掉下面的内容
//this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
在你的CSS覆盖引导模态公开类与下面
.modal-open{ overflow:inherit; }
有人build议overflow-y: scroll; 这个问题就是如果你的内容首先不存在，那么你的内容就会改变。
注意根据http://getbootstrap.com/javascript/#modals ，总是尝试将模式的HTML代码放在文档的顶层位置
在TB问题中find了这个答案
只需在css下面join这个小小的动作即可
body, .navbar-fixed-top, .navbar-fixed-bottom { margin-right: 0 !important; }
我使用Bootstrap v3.3.4并且看到这个问题，我明白Bootstrap模式将正确的17px填充到正文，所以只需使用下面的代码：
body { padding-right: 0 !important; }
这里没有解决办法解决了我的问 但是从Github那里得到的Css为我工作。
body.modal-open { padding-right: 0px !important; overflow-y: auto; }
只要做到这一点，这就是一切
.modal-open { padding-right: 0 !important; }
为我工作。 简而言之，完成这项工作。
这是一个报告问题bootstrap： 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
我面临同样的问题，以下解决scheme为我工作
.modal-open { overflow: visible; } .modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { padding-right:0px!important; }
试着改变下面所有的发生
$body.css('padding-right',XXX)
同
$body.css('padding-right'0)
在你的bootstrap.js文件中。
就这样..
我有同样的问题，我得到的解决scheme是为我工作….
body .modal-open { padding-right: 0% !important; overflow-y: auto; }
将此代码放置在style.css文件的顶部
只需添加一个类
.modal-open{ padding-right:0px !important;}
它为我工作
我解决了我的问题，我认为这将适用于所有人。 在bootstrap.js中有一行：
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
这意味着在某些情况下，Bootstrap会在打开模式时添加滚动条宽度的填充权。 所以@pmanOnu是一半的权利，但不要删除整行代码，但只有
将bodyPad + this.scrollbarWidthreplace为0
使Bootstrap添加0px的填充权（这与未添加相同）。
然后将.modal-open {overflow: initial;}到您的自定义CSS，以防止Bootstrap在打开模式时禁用滚动条。
如果以上所有解决scheme都不起作用，可能是因为定位内容，只要看看模态的位置即可
body.modal-open { padding-right: 0 !important; // not important position: relative; }
所以事实certificate，我实际上得到右边距250px左右。 我的问题似乎是这样的。模态开放正在被固定下来，这是任何原因的原因。 所以在我的情况下，修复是类似的，但我设置位置值为默认如下：
.modal-open{ position: initial !important;}
对于还在为此而苦恼的人 – Bootstrap的最新版本有一个本地修复。 只需更新最新版本的bootstrap.min.css和bootstrap.min.js文件。
我真的不喜欢任何提供的解决scheme，并使用它们的组合（以及我以前用于qTip模式的修复），以提出对Bootstrap v3.3.7最适合的解决scheme。
更新：解决了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"); }) })
这允许背景“固定”，但仍然允许模式滚动，解决双滚动条的问题和固定的导航栏的重新定位。
请注意，还有其他代码，以便在模式closures时记住“滚动”位置（并返回到该位置）。
希望这可以帮助其他任何想要实现我所追求的目标的人。
我发现Agni Pradharma为我工作的答案; 但不完全在Chrome中。
看起来文档滚动条比另一个滚动条要宽， 所以我编辑了getScrollBarWidth函数。
它只是首先检查宽度; 删除文档滚动条; 然后比较差异。 它也恰好是更less的代码。
$(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); };
这里是我用的，只要你不介意强制滚动条，在Bootstrap 3.2.0中就可以工作100％。
.modal-open .modal { overflow-x: hidden; overflow-y: scroll; }
最好的方法是：添加到BODY overflow-y: scroll
并从bootstrap.js中删除4个函数 –
checkScrollbar setScrollbar resetScrollbar measureScrollbar
对我来说，它可以正常工作
.modal-open .modal { overflow-x: scroll; overflow-y: scroll; }
对于我来说，以下内容似乎可行 – 在Linux和Firefox上进行testing：
body.modal-open { overflow: inherit; padding-right: inherit !important; }
这对我有效。 重写添加到正文右侧的17px填充：
body.modal-open { padding-right: inherit !important; }
我调整了TBAG的这个线程进一步的这个答案
body.modal-open {padding-right：0px！important; 溢出-y：auto; }
在微小的调整它在桌面上，移动设备溢出设置为隐藏
最终的代码
body.modal-open { padding-left: 16px!important; overflow-y: auto; }
希望这可以帮助！
