HTML/CSS/Bootstrap实现动态表单元素每行固定3个自动换行布局

问题背景 #

我有一款应用，其中form data由backend返回，表单元素数量不固定，可能为10个、3个、5个不等。需要实现每行恰好放置3个表单元素的布局，超出3个的元素自动排布到下一行。例如总共有7个元素时，最终排布为3行，前2行各展示3个元素，最后1行展示剩余1个元素。

现有React代码如下，需要注入对应CSS实现需求：

return (
  <div>
    <FormValidator emitter={this.emitter} />
    <div className='react-form-builder-form'>
      <form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}>
        { this.props.authenticity_token &&
          <div style={formTokenStyle}>
            <input name='utf8' type='hidden' value='&#x2713;' />
            <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
            <input name='task_id' type='hidden' value={this.props.task_id} />
          </div>
        }
        {items}
      </form>
      <div>
        {validationList}
      </div>
    </div>
  </div>
)

预期效果参考：

尝试过的无效方案 #

曾尝试编写如下CSS，调整结构后效果不符合预期：

.form__container {
  display: flex;
  flex-wrap: wrap;
}

.form__container input {
  width: 33.33%;
}

对应JSX调整：

<div className='form__container'>
  <form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}>
    { this.props.authenticity_token &&
      <div style={formTokenStyle}>
        <input name='utf8' type='hidden' value='&#x2713;' />
        <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
        <input name='task_id' type='hidden' value={this.props.task_id} />
      </div>
    }
    {items}
  </form>
  <div>

实际错误效果参考：

问题原因 #

之前的写法不生效核心有两点：

• Flex布局仅会影响直接子元素，上述代码中form__container的直接子元素是<form>标签，并非循环渲染的单个表单项，设置的宽度规则无法作用到目标元素上
• 直接给<input>设置33.33%宽度时，默认盒模型下元素的内边距、边框会额外占据宽度，导致元素实际占位超出容器，引发布局错乱；且多数表单项会附带label、校验提示等内容，仅给input设宽度无法保证整行对齐

实现方案 #

方案1：原生CSS Flex实现 #

1. 将Flex布局类设置在直接包裹所有表单项的父容器上，不要跨层设置
2. 给每个表单项的最外层容器设置宽度，同时开启border-box盒模型，避免内边距撑破布局
   参考CSS代码：

/* 表单项直接父容器 */
.form-items-wrapper {
  display: flex;
  flex-wrap: wrap;
}

/* 单个表单项最外层类 */
.form-item {
  width: 33.33%;
  box-sizing: border-box;
  padding: 0 8px; /* 按需调整，控制表单项之间的横向间距 */
}

调整JSX结构时注意：隐藏的token输入区域属于不可见元素，不要添加form-item类，避免占用布局空间。

方案2：Bootstrap栅格实现 #

如果项目已引入Bootstrap，无需编写自定义CSS，直接使用内置栅格类即可快速实现：

• 给直接包裹所有表单项的父容器添加row类
• 给每个表单项的最外层容器添加col-4类（Bootstrap默认12栅格体系，12/3=4，自动实现每行3个元素、多余元素自动换行的效果）
  参考结构示例：

<form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}>
  { this.props.authenticity_token &&
    <div style={formTokenStyle}>
      <input name='utf8' type='hidden' value='&#x2713;' />
      <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
      <input name='task_id' type='hidden' value={this.props.task_id} />
    </div>
  }
  {/* 表单项直接父容器加row类 */}
  <div className="row">
    {items.map(item => (
      // 单个表单项外层加col-4类
      <div className="col-4" key={item.uniqueKey}>
        {/* 表单项具体内容，包含label、input、错误提示等 */}
      </div>
    ))}
  </div>
</form>

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