Contact Form 7表单移动端响应式列问题：字段无法换行排列

你的问题出在break-inside属性不适用当前布局场景——这个属性是给多列布局（column）用的，而你的表单字段并排大概率是flex/浮动布局导致的，直接用下面的CSS就能解决：

/* 移动端（768px及以下）强制字段上下排列 */
@media (max-width: 768px) {
  /* 让每个表单字段容器占满宽度，块级显示 */
  .wpcf7-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }
  /* 如果你的表单是用行容器分组的flex布局，加上这段 */
  .wpcf7-form .wpcf7-form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
}

操作步骤： #

• 登录WordPress后台，进入「外观」→「自定义」→「额外CSS」
• 把上面的代码粘贴进去，保存发布即可

如果还是没生效，用浏览器调试工具查看表单字段的父容器类名，替换代码里对应的类名就行。

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