本文介绍了Twitter Bootstrap 模态打开/关闭导致固定标题跳转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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

如何重新创建

在网络浏览器中打开

我想要什么

我希望标题在打开/关闭模式时停止跳跃.滚动条消失的事实不是问题.实际上，我希望它保持这种状态.

更新

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

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

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

解决方案

我似乎找到了解决问题的快速方法.它使用一段 javascript 为标题添加额外的样式(15px padding-right)以防止它跳跃.这可能不是最好的解决方案，但现在它工作得很好.

由于在小于 768 像素(移动)的视口上没有问题，这段代码仅将额外的 15 像素添加到更大的视口，例如台式机和笔记本电脑


                
                  
                    改变宽度/高度移动旋转的元素
                  
                  Changing width/height moves rotated element(改变宽度/高度移动旋转的元素)
                
                

                
                
                  
                    使用 CSS3 旋转背景图像
                  
                  Rotating a background image with CSS3(使用 CSS3 旋转背景图像)
                
                

                
                
                  
                    jQuery - CSS - 通过拖动鼠标事件旋转 Div
                  
                  jQuery - CSS - Rotate Div by drag mouse event(jQuery - CSS - 通过拖动鼠标事件旋转 Div)
                
                

                
                
                  
                    CSS 相对于参考点的旋转
                  
                  CSS rotation with respect to a reference point(CSS 相对于参考点的旋转)