使用Divi builder搭建WordPress首页如何实现平板两列移动端单列自适应

1. 检查行模块的响应式列数配置 #

• 打开Divi Builder首页编辑界面，定位到对应布局的行模块，点击行设置齿轮图标
• 切换到「设计」标签，找到「列结构」选项
• 点击选项旁的响应式切换图标（手机+平板重叠的小标识），分别切换不同设备视图单独配置：
  • 平板视图下设置列数为2
  • 移动端视图下保持列数为1
• 同步检查列的「间距」设置，如果平板端列左右边距设置过大，会导致两列总宽度超出行容器宽度自动折行，调整到合适数值即可

90%以上的同类问题都是仅配置了桌面和移动端的列数，平板端默认继承了移动端的单列规则导致的。

2. 校验Divi内置断点设置 #

• 进入 WordPress 后台 → Divi → 主题选项 → 生成器 → 高级 → 断点设置
• 确认平板断点范围默认值为 768px - 980px，如果自定义断点把平板范围和移动端范围设为重叠，就会触发移动端的单列规则
• 非必要不要修改默认断点数值，避免不同设备的样式触发逻辑混乱

3. 排查自定义CSS冲突 #

• 如果上述两项配置均正常，打开浏览器开发者工具，选中列元素查看加载的样式规则
• 排查是否有自定义CSS强制给平板宽度下的列设置了width:100% !important这类规则，这类规则通常来自子主题style.css、Divi主题选项的自定义CSS输入框、第三方自定义代码插件
• 删除冲突规则，或者调整规则的媒体查询范围仅覆盖移动端（<768px）即可

4. 缓存清理验证 #

• 所有配置修改完成后，依次清空Divi内置静态资源缓存、WordPress缓存插件缓存、浏览器本地缓存、CDN缓存（若开启）后再测试，大部分设置生效延迟都是缓存未清理导致的

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