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;
}
可以不缩放页面,但是页面在有弹窗的时候还会存在滚动条。
看自己如何取舍了。