css - Twitter Bootstrap 模式打开/关闭导致固定标题跳转

Question

我几乎完成了一个简单的 2 页网站，用于我的注册域名。 不幸的是，我有一个似乎无法解决的小问题:Twitter Bootstrap 模式打开和关闭时标题跳动。 在移动设备上没有问题。该问题仅出现在较大的视口(viewport)中，例如台式机和笔记本电脑。

如何重新创建

1. 打开http://www.domains.cloudlabz.nl/domains在网络浏览器中，通过降低视口(viewport)高度确保获得垂直滚动条。
2. 点击其中一个蓝色的“更多信息”按钮。
3. 注意模式打开后跳跃的标题和消失的滚动条。
4. 关闭模式并注意标题跳回和滚动条重新出现。

检查下图(在 Opera、Safari、Firefox 和 Chrome 中结果相同):

我想要什么

我希望标题在打开/关闭模式时停止跳转。滚动条消失的事实不是问题。事实上，我希望它保持这样。

更新

我注意到跳转标题只出现在固定位置的元素上，比如我的标题(添加了 Bootstrap 类 navbar-fixed-top)。它甚至出现在 Bootstrap 网站本身:http://getbootstrap.com/javascripts .转到桌面上的“模态 > 可选尺寸”区域，然后单击其中一个按钮。您会看到右侧菜单来回跳转。

当模式打开时，类 .modal-open 被添加到 body 元素中(感谢 @Pred 指出这一点)。它在右侧添加了 15px 的填充，宽度与滚动条间距相同。这可以防止 body 来回跳跃。

不幸的是，这个填充显然不适用于固定元素。

Answer 1

当显示模态时，Bootstrap 添加 class="modal-open" 和 padding-right: 15px; 到 body。要删除右移并保留滚动条，请将其添加到您的 css:

body.modal-open {
  overflow: inherit;
  padding-right: 0 !important;
}

在 bootstrap 3.3.4 中试过