twitter-bootstrap Bootstrap 3 模式在打开时创建滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20829332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 modal creates scrollbar when opened
提问by Nate
I'm trying to use Bootstrap for the first time and am having an issue with modal dialogs. Using the example code on this page, when the modal is opened a scrollbar appears, which also shifts the content on the page to the left.
我第一次尝试使用 Bootstrap 并且遇到了模态对话框的问题。使用此页面上的示例代码，当打开模态框时会出现一个滚动条，它也会将页面上的内容向左移动。
Code:
代码：
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
JSFIDDLE: http://jsfiddle.net/WqRBP/
JSFIDDLE：http: //jsfiddle.net/WqRBP/
A lot of sites I'm looking at use Bootstrap and they don't have this issue, so is there some sort of easy fix for the problem?
我正在查看的很多网站都使用 Bootstrap 并且他们没有这个问题，那么是否有某种简单的方法可以解决这个问题？
EDIT: The scrollbar appears in Chrome and IE, I haven't tested in other browsers.
编辑：滚动条出现在 Chrome 和 IE 中，我没有在其他浏览器中测试过。
Here's what I'm seeing in JSFIDDLE:
这是我在 JSFIDDLE 中看到的：
采纳答案by lvarayut
The problem occurred because Twitter Bootstrapalways shift the page 15px to the left when a modal is opened. You can solve this by moving the page back to the right - margin-right: -15px. This can be done by using events show.bs.modaland hidden.bs.modalprovided by Bootstrap's modal.
出现问题是因为Twitter Bootstrap打开模态时总是将页面向左移动 15px。您可以通过将页面移回右侧来解决此问题 - margin-right: -15px。这可以通过使用事件来完成show.bs.modal，并hidden.bs.modal通过提供Bootstrap's modal。
$('#myModal').bind('hidden.bs.modal', function () {
$("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
$("html").css("margin-right", "-15px");
});
FYI:
供参考：
show.bs.modal: This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
show.bs.modal：当调用 show 实例方法时立即触发此事件。如果由单击引起，则被单击的元素可用作事件的 relatedTarget 属性。
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidden.bs.modal：当模态完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。
回答by Nate
LVarayut's answer sent me in the right direction and what I ended up using is this:
LVarayut 的回答让我朝着正确的方向前进，我最终使用的是这个：
body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
margin-right: 0;
}
.modal {
overflow-y: auto;
}
回答by Joel Enanod Jr
This is my solution:
这是我的解决方案：
.modal {
margin-right: -15px;
}`
and add this also
并添加这个
body.modal-open {
margin-right: 0 !important;
}
Hope this help you.
希望这对你有帮助。
回答by Walky Toki
It is so simple, just add to your css:
很简单，只需添加到您的css中：
body.modal-open{overflow:hidden!important;}
/*Optional:*/
.modal-open, .modal{padding-right:0!important}
回答by Tibs
This is my solution
这是我的解决方案
#myModal{
overflow:hidden;
}
body {
overflow-y: scroll !important;
}
With this,you will force your page to have a scroll bar.
有了这个，你将强制你的页面有一个滚动条。
回答by Ilya
回答by Michael
This work for me. It should work fine
这对我有用。它应该工作正常
body.modal-open {
padding-right: 0 !important;
overflow-y: scroll;
}
回答by Shafiqul Islam
In this case you can overwrite bootstrap main css using your own css cause sometime may effect other. so this is simple code which work
在这种情况下，您可以使用自己的 css 覆盖引导主 css，因为有时可能会影响其他。所以这是工作的简单代码
body.modal-open .modal {
margin-right: -15px !important;
}
body.modal-open {
margin-right: 0 !important;
}
if you want to change main bootstrap css then update this
如果你想改变主引导 css 然后更新这个
body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
margin-right: 0 !important;
}
回答by Faazi Ahamed
Try This
试试这个
.modal-open {
overflow-y: auto
}
回答by alaster
In my case there were my own styles that caused the problem:
就我而言，有我自己的风格导致了这个问题：
html {
overflow-y: scroll;
}
You may change htmlto bodyso there is only one scrollbar:
您可以更改html为body这样只有一个滚动条：
body {
overflow-y: scroll;
}
