如何实现Contact Form 7四字段同行布局及响应式适配？

嘿，我来帮你搞定这个Contact Form 7的响应式布局需求！你想要4个字段在桌面端横向排列，移动端自动垂直铺满宽度，用CSS Flexbox来实现会比你之前用的浮动方案更简洁可靠，还能避免浮动带来的清除浮动、间距计算麻烦等问题。

下面是具体的实现步骤：

1. 调整Contact Form 7的表单结构 #

首先在CF7的表单编辑器里，给每个字段包裹一个自定义容器类，同时给所有字段的父容器加一个统一的类，方便我们控制布局：

<div class="field-container">
  <div class="field-item">
    [text* your-name placeholder "姓名"]
  </div>
  <div class="field-item">
    [email* your-email placeholder "邮箱"]
  </div>
  <div class="field-item">
    [tel* your-phone placeholder "电话"]
  </div>
  <div class="field-item">
    [text your-subject placeholder "主题"]
  </div>
</div>

这里的.field-container是所有字段的父容器，.field-item是单个字段的容器，你可以根据自己的字段类型替换里面的短代码。

2. 编写响应式CSS代码 #

替换你之前的CSS，用Flexbox来实现布局：

/* 桌面端：4个字段横向均分排列 */
.wpcf7-form .field-container {
  display: flex;
  gap: 2%; /* 字段之间的间距，可根据需求调整 */
  margin-bottom: 20px;
}

.wpcf7-form .field-item {
  flex: 1; /* 让每个字段自动平分父容器的可用宽度 */
  min-width: 0; /* 防止字段内的长文本撑破布局 */
}

/* 确保表单控件占满容器宽度 */
.wpcf7-form .field-item .wpcf7-form-control {
  width: 100%;
  box-sizing: border-box; /* 保证padding和边框不会超出容器宽度 */
}

/* 平板/移动端（屏幕宽度≤768px时）：垂直排列，字段宽度100% */
@media only screen and (max-width: 768px) {
  .wpcf7-form .field-container {
    flex-direction: column;
    gap: 15px; /* 垂直排列时的上下间距 */
  }

  .wpcf7-form .field-item {
    width: 100%;
  }
}

为什么这个方案更好？ #

• Flexbox自动处理横向排列的对齐和间距，不用手动计算百分比宽度，也不需要处理浮动的清除问题
• gap属性可以轻松控制字段之间的间距，比用margin更直观，不会出现最后一个字段多余间距的问题
• flex:1确保每个字段在桌面端宽度均等，即使字段内容长度不同也不会错位
• 媒体查询触发后自动切换为垂直布局，完全适配移动端

如果你之前的.one-half、.one-third类是其他布局用的，建议不要混用，避免样式冲突。直接用上面的新类名就可以实现你想要的效果啦！

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