Bootstrap出现模态框页面抖动且出现滚动条

bootstrap打开模态框时出现页面抖动

1、出现的问题

2、出现问题的原因

3、解决办法

问题

1、在未出现模态框时页面如下(此时页面正常显示):
(因项目未做完,截图只截取一部分,大概知道意思即可)
在这里插入图片描述
2、当打开模态框时:
①页面不缩放时页面会向右移动
在这里插入图片描述
②页面缩放会出现滚动条
在这里插入图片描述

原因

出现第一种情况①是因为body页面出现了 style="padding-right: 16px;"在这里插入图片描述
出现第二种情况②是因为出现了.modal-open如下图:在这里插入图片描述

解决办法

修改样式,如下图,可以完美解决!!!!
在这里插入图片描述

	```
	<style>
			body {
				padding-right: 0px !important;
			}
	
			.modal-open .modal {
				overflow-x: hidden !important;
				overflow-y: hidden !important;
			}
		</style>
	```

总结

在使用bootstrap的时候出现问题(主要时样式问题)都可以打开浏览器的调试器模式进行调试,找出问题的原因,再根据具体原因调整样式

以上是我在前端使用Bootstrap所遇到的问题,如有疑问或错误欢迎评论!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值