<div class="container">
<div class="row">
<form class="inline-form">
<div class="inline-form">
<input type="text" placeholder="Your name">
</div>
<div class="inline-form">
<input type="text" placeholder="Email address">
</div>
<div class="inline-form">
<input type="text" placeholder="Phone number">
</div>
</form>
</div>
</div>
Necesito crear 3 campos de formulario con ancho idéntico espaciados uniformemente entre sí en una fila. El HTML anterior está dentro de un div que tiene .col-md-6 (que debería haber ocupado la mitad del ancho de la página).
Creo que olvidaste incluir la clase col-md-6 en tu fragmento de código.
- Ralph David Abernathy
28 de marzo de 2021 a las 7:56
------------------------------------
Prueba esto
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-control">
<input type="text" placeholder="Your name">
</div>
<div class="form-control">
<input type="text" placeholder="Email address">
</div>
<div class="form-control">
<input type="text" placeholder="Phone number">
</div>
</form>
</div>
</div>
Cambié:
clase de formulario, de "formulario en línea" a "formulario en línea"
clase div, de "formulario en línea" al "control de formularios"
Mi código se basó en la ayuda de BS4: enlace
Si desea agregar .col-md-6, puede agregar la etiqueta antes del contenedor como una etiqueta DIV, como esta
<div class="cold-md-6">
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-control">
<input type="text" placeholder="Your name">
</div>
<div class="form-control">
<input type="text" placeholder="Email address">
</div>
<div class="form-control">
<input type="text" placeholder="Phone number">
</div>
</form>
</div>
</div>
</div>
[EDITAR]
Basándome en tu propio código, modifiqué el tuyo para alcanzar el resultado que deseas.
Algunos cambios:
El formulario involucra todos los campos de entrada.
eliminar contenedor en la etiqueta del formulario (no es una buena idea anidar contenedores)
agregue col-4 a cada componente del formulario
agregar col-12 al área de texto
2
Hola, muchas gracias. Sin embargo, sigo teniendo el problema de que no están espaciados correctamente cuando están en la columna de media página. ¿Puedes echar un vistazo al resultado después de insertar tus códigos en mi página web? drive.google.com/drive/folders/…
– Tuân Thiên Minh Nguyễn
5 de abril de 2021 a las 13:09
¿Lo probaste?
- Claudio
9 de abril de 2021 a las 12:22
------------------------------------
puedes cambiar la clase del formulario a "d-flex flex-row"
o puedes envolver las entradas que quieras en la misma línea con otro div así
<div class="container d-flex mx-auto">
<div class=" row">
<form class="form-group">
<div class="d-flex flex-row mb-4">
<div class="form-control mr-3">
<input type="text" placeholder="Your name">
</div>
<div class="form-control mr-3">
<input type="text" placeholder="Email address">
</div>
<div class="form-control mr-3">
<input type="text" placeholder="Phone number">
</div>
</div>
<textarea class="form-control"></textarea>
</form>
</div>
</div>
