bootstrap弹出模态框会给body加padding的解决方法

bootstrap弹出模态框会给body加padding，导致页面缩放的解决方法：

在页面或是css文件里加上（$paddingSize为less变量，需要改成像素或是其他单位，如12px,1rem）：

body{

padding: $paddingSize !important;

}

这样在没有滚动条的情况下解决了。页面有滚动条的情况下页面还是会缩放。

原理是弹出时，bootstrap 给body上加了modal-open这个样式。

.modal-open的代码如下：

.modal-open {

　　 overflow: hidden;

}

这样的好处是，弹缩后页面隐藏滚动条，让无法滚动。

如果重写：

.modal-open {

　　overflow: auto !important;

}

可以不缩放页面，但是页面在有弹窗的时候还会存在滚动条。

 

看自己如何取舍了。

转载于:https://www.cnblogs.com/zouzhongxing/p/9817527.html