使用HTML隐藏移动端元素后产生多余空白该如何解决

修复方案 #

你使用的是Bootstrap原生响应式显示类，d-none d-sm-block的作用逻辑是移动端（<576px宽度）下将元素设为display: none，正常不会占用文档流空间，出现多余空白可按以下步骤排查：

• 先校验样式优先级是否冲突：你给当前元素加了mb-3底部外边距类，如果存在自定义样式覆盖了d-none的生效优先级，会导致元素实际没有被设置为display: none，可以调整自定义样式权重，或者给d-none规则加!important强制生效
• 检查父容器的间距设置：如果该隐藏元素的父级容器单独设置了固定内边距（padding）或外边距（margin），即使子元素隐藏父容器的间距依然会保留，可给父容器添加Bootstrap响应式间距类，比如m-0 m-sm-3、p-0 p-sm-3，实现移动端清空间距、大屏尺寸正常保留间距的效果
• 排查外边距折叠问题：如果该隐藏元素的上下相邻元素都设置了外边距，元素隐藏后两个相邻元素的外边距会叠加形成超出预期的空白，可以给相邻元素添加overflow: hidden属性避免折叠，或者用响应式间距类调整移动端的外边距数值
• 排查自定义样式冲突：确认你没有给该元素额外设置固定高度、最小高度、visibility: hidden、opacity: 0这类只会隐藏视觉效果、不会释放文档流空间的样式，仅保留d-none作为移动端隐藏的规则即可

内容的提问来源于stack exchange，提问作者Kapoor