0
194
Viewsponer un número específico de elemento en una fila en html/css
Tengo una aplicación. form data provienen del backend . a veces el elemento puede ser 10 a veces 3 a veces 5 . Necesito poner exactamente 3 element in a row . si hay más de 3 , deben estar en la siguiente row . ¿Cómo puedo lograr esto usando html/css o bootstrap ?
En el siguiente ejemplo hay 7 elementos. por lo que debe haber 3 filas. en las primeras 2 filas debe haber 3 elementos y en la última fila exactamente 1. ¿Cómo se puede lograr esto?
A continuación se muestra el código. ¿Cómo puedo inyectar el css en el mismo?
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='✓' /> <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> ) } 
cuando apliqué
.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='✓' /> <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>viene como abajo.
3 answers
Answer question0
Puede usar Flex Box para lograr esto.
puede aplicar css de esta manera a los elementos externos e internos:
.outer-container { display: flex; } .inner-element { width: 33.33% }En su caso, el elemento externo será el contenedor del formulario y el elemento interno serán los elementos de entrada.
0
Debe agregar estos estilos al padre de las entradas de formulario.
.form__container { display: flex; flex-wrap: wrap; }y asigne un ancho a su campo de entrada.
.form__container input { width: 33.33%; }0
Podría intentar usar bootstrap con el sistema de cuadrícula, usando un contenedor div con una clase de fila, con varios elementos que justifiquen la alineación y tener divs con la clase col-4 cada uno, mapeando su matriz, en este caso elementos, y devolviendo este jsx a Complete sus datos en filas de 3 elementos que se distribuirán de manera justa en el área existente de la sección de representación de sus elementos. Permítanme brindarles un ejemplo rápido del mapeo de este enfoque de bootStrap . ¡Espero que esto ayude!
<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='✓' /> <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>