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

我有一份申請。form data來自backend. 有時元素10有時3有時5。我需要準確地說3 element in a row。如果有超過3他們應該在下一個row。我怎樣才能使用html/cssor來實作這一點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>

它就像下面一樣。

uj5u.com熱心網友回復：

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

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

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

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

uj5u.com熱心網友回復：

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

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

并為您的輸入欄位分配寬度。

.form__container input {
   width: 33.33%;
}

uj5u.com熱心網友回復：

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

標籤：javascript html css 反应 推特引导

上一篇：如何完全隱藏LinkReact組件？

下一篇：關閉按鈕不會關閉模態