twitter-bootstrap Twitter Bootstrap 模式打开/关闭导致固定标题跳转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25274244/
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
Twitter Bootstrap modal opening/closing causes fixed header to jump
提问by ti6on
I am almost done with a simple 2-page website for my registered domain names. Unfortunately I have one small issue I can't seem to fix: a jumpy header when a Twitter Bootstrap modal opens and closes. On mobile devices there's no problem. The problem only occurs in larger viewports like desktops and laptops.
我几乎完成了一个简单的 2 页网站，用于我注册的域名。不幸的是，我有一个似乎无法解决的小问题：当 Twitter Bootstrap 模式打开和关闭时出现一个跳跃的标题。在移动设备上没有问题。该问题仅发生在较大的视口中，例如台式机和笔记本电脑。
How to recreate
如何重新创建
- Open http://www.domains.cloudlabz.nl/domainsin a webbrowser and make sure you get a vertical scrollbarby lowering the viewport height.
- Click on one of the blue 'more info' buttons.
- Notice the jumping header and disappearing scrollbar once the modal opens.
- Close the modal and notice the header jumping back and the scrollbar reappearing.
- 在网络浏览器中打开http://www.domains.cloudlabz.nl/domains并确保通过降低视口高度来获得垂直滚动条。
- 单击蓝色“更多信息”按钮之一。
- 一旦模态打开，请注意跳跃的标题和消失的滚动条。
- 关闭模态并注意标题跳回并重新出现滚动条。
Check the following image (same result in Opera, Safari, Firefox and Chrome):
检查下图（Opera、Safari、Firefox 和 Chrome 中的结果相同）：
What I'd like
我想要什么
I'd like the header to stop jumping when opening/closing a modal. The fact the scrollbar disappears is not an issue. Actually, I would like it to stay like that.
我希望标题在打开/关闭模态时停止跳跃。滚动条消失的事实不是问题。事实上，我希望它一直这样。
Update
更新
I noticed the jumping header only occurs with fixed position elements such as my header (added Bootstrap class navbar-fixed-top). It even occurs on the Bootstrap website itself: http://getbootstrap.com/javascripts. Go to the 'Modals > Optional Sizes' area on a desktop and click one of the buttons. You'll see the right side menu jumping back and forth.
我注意到跳跃标题只出现在固定位置的元素上，比如我的标题（添加了 Bootstrap 类导航栏固定顶部）。它甚至出现在 Bootstrap 网站本身：http: //getbootstrap.com/javascripts。转到桌面上的“模态 > 可选尺寸”区域，然后单击其中一个按钮。您会看到右侧菜单来回跳动。
When the modal opens, the class .modal-open is added to the body element (thanks for pointing that out @Pred). It adds a padding of 15px to the right, which is the same width as the scrollbar gutter. This prevents the body from jumping back and forth.
当模态打开时，类 .modal-open 被添加到 body 元素中（感谢您指出 @Pred）。它在右侧添加了 15px 的填充，与滚动条装订线的宽度相同。这可以防止身体前后跳跃。
Unfortunately this padding apparently does not apply to fixed elements.
不幸的是，这种填充显然不适用于固定元素。
采纳答案by ti6on
I seemed to have found a quick fix for my issue. It uses a piece of javascript to add extra style to the header (15px padding-right) to prevent it from jumping. This might not be the best solution but for now it works just fine.
我似乎找到了快速解决我的问题的方法。它使用一段 javascript 为标题添加额外的样式（15px padding-right）以防止它跳跃。这可能不是最好的解决方案，但现在它工作得很好。
Since there were no issues on viewports smaller than 768px (mobile) this piece of code only adds the extra 15px to larger viewports such as desktops and laptops
由于在小于 768px（移动）的视口上没有问题，这段代码只为更大的视口（如台式机和笔记本电脑）添加了额外的 15px
<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>
If you know a better solution (preferably CSS3 only), please let me know. Thanks for all the help!
如果您知道更好的解决方案（最好只有 CSS3），请告诉我。感谢所有的帮助！
回答by ti6on
Bootstrap adds class="modal-open"and padding-right: 15px;to bodywhen the modal is shown. To remove the right shift and keep the scroll bar add this to your css:
自举增加class="modal-open"和padding-right: 15px;到body时被示出的模态。要删除右移并保留滚动条，请将其添加到您的 css 中：
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
Tried in bootstrap 3.3.4
在引导程序 3.3.4 中尝试
回答by Rafael Minguet García
All this happens because of this part of code in bootstrap.js:
这一切的发生都是因为 bootstrap.js 中的这部分代码：
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)
}
That annoying problem happens in Firefox 32.0 (Gecko/20100101) and Chromium Version 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04). Not happens in QupZilla Version 1.6.6 (WebKit 537.21).
这个恼人的问题发生在 Firefox 32.0 (Gecko/20100101) 和 Chromium 版本 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04) 中。在 QupZilla 版本 1.6.6 (WebKit 537.21) 中不会发生。
For me, the dirty fix is to comment the conditional line, after that it works in all browsers I tested (including some android's browsers).
对我来说，肮脏的修复是评论条件行，之后它在我测试的所有浏览器（包括一些 android 的浏览器）中都有效。
NOTE: if you comment that line, you should be careful with the size of your modals since bootstrap will not create enough space for the new scrollbar.
注意：如果您注释该行，则应注意模态的大小，因为引导程序不会为新滚动条创建足够的空间。
Regards.
问候。
回答by Pred
When the modal opens, the "modal-open" class is added to the HTML <body>element which hides overflow. You can change this by over-writing the "modal-open" class with overflow: inherit. This will keep the scrollbar in view, just as it is when the modal is closed. Keep in mind that this will change the overflow option whenever any modal is opened on the page. Hope this helps. Good luck!
当模态打开时，“modal-open”类被添加到<body>隐藏溢出的 HTML元素中。您可以通过使用overflow: inherit. 这将使滚动条保持在视图中，就像模式关闭时一样。请记住，只要在页面上打开任何模式，这都会更改溢出选项。希望这可以帮助。祝你好运！
回答by sdvnksv
As you usually put Bootstrap navbaras a direct child of the bodycontainer:
正如您通常将 Bootstrapnavbar作为body容器的直接子级：
<body>
<nav class="navbar navbar-fixed-top">...</nav>
</body>
You can use the bodypadding-rightvalue, calculated in the Bootstrap core code to prevent it from "jumping" when opening a modal window, to fix the navbarissue as well . A pure CSS solution is below:
您也可以使用bodypadding-right在 Bootstrap 核心代码中计算的值来防止它在打开模态窗口时“跳跃”，以解决该navbar问题。一个纯 CSS 解决方案如下：
.navbar-fixed-top {
padding-right: inherit;
}
Easy as that.
就这么简单。
回答by sdvnksv
Another solution is to add:
另一种解决方案是添加：
.modal-open .navbar-fixed-top {
overflow-y: scroll;
}
to prevent its content from jumping. Again, easy as that.
以防止其内容跳转。再一次，就这么简单。
回答by davemcmillan
This one only works if you know your page content is longer than the viewport (so any long scrolling page). You can just add the following to your CSS -
只有当您知道页面内容比视口（任何长滚动页面）都长时，此方法才有效。您可以将以下内容添加到您的 CSS -
html {
overflow-y: scroll;
}
.modal-open {
padding-right: 0!important;
}
回答by murli2308
I came around same issue and I solved it as follows
我遇到了同样的问题，我解决了如下
just add
只需添加
body.modal-open {
position: fixed;
overflow: scroll;
width: 100%;
padding-right: 0!important;
}
回答by VDWWD
For Bootstrap 4 sticky-top, use the following snippet. Tested all the CSS solutions on this page but none worked for Bootstrap 4.
对于 Bootstrap 4 sticky-top，请使用以下代码段。在此页面上测试了所有 CSS 解决方案，但没有一个适用于 Bootstrap 4。
<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>
My page design was as follows
我的页面设计如下
<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>
回答by paknefia
In my case, it can be solved by adding comments or remove these two lines right: 0;and left: 0;in bootstrap.css file:
在我的情况下，可以通过添加注释或删除这两条线来解决right: 0;，并left: 0;在bootstrap.css文件：
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
/* right: 0;
left: 0; */
z-index: 1030;
}
Note: I use bootstrap v3.3.7
注意：我使用引导程序 v3.3.7
