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;

posted on 2018-10-19 17:09  阿提  阅读(1200)  评论(0编辑  收藏  举报

导航