在 html/css 中連續放置特定數量的元素

Question

我有一份申請。 form data來自backend 。 有時元素可以是10有時是3有時是5 。 我需要3 element in a row 。 如果超過3 ，它們應該在下row 。 如何使用html/css或bootstrap來實現這一點。

在下面的示例中，有 7 個元素。 所以應該有3行。 在前 2 行應該有 3 個元素，在最后一行正好 1。如何實現這一點？

下面是代碼。 我怎樣才能注入相同的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>
    )
  }

當我申請

   .form__container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .form__container input {
      width: 33.33%;
    }



<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>

它就像下面一樣。

Answer 1

您必須將這些樣式添加到表單輸入的父級。

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

並為您的輸入字段分配寬度。

.form__container input {
   width: 33.33%;
}

Answer 2

您可以使用彈性框來實現這一點。

您可以以這種方式將 css 應用於外部和內部元素：

.outer-container { display: flex; }
.inner-element { width: 33.33% }

在您的情況下，外部元素將是表單容器，內部元素將是輸入元素。

Answer 3

您可以嘗試使用帶有網格系統的引導程序，使用帶有行類的容器 div，有幾個元素證明對齊，並且每個 div 都帶有 col-4 類，通過映射您的數組，在這種情況下為項目，並將這個 jsx 返回到以 3 個元素的行填充您的數據，這些元素將公平地分布在您的項目呈現部分的現有區域中。 讓我提供一個這個bootStrap方法的映射的快速示例。 希望這可以幫助！

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <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>} <div className="container-fluid"> <div className="row justify-content-between align-items-center"> {items.map((item, ind) =>( <div key={ind} className="col-4"> <label htmlFor="exampleFormControlInput1" className="form-label">items.label</label> <input type="email" className="form-control" id="exampleFormControlInput1" placeholder="Lorem" /> </div> ));} </div> </div> </> </form> <div> {validationList} </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>