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

时间:2022-02-01 22:15:48

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