0
296
Vistas¿Cómo puedo alinear todos los campos de entrada en una línea usando el formulario de arranque?
He estado trabajando en este formulario donde debería verse como la imagen adjunta. 
Pero en cambio está obteniendo algo como esto. 
aquí está mi código:
<form> <div class="form-row"> <div class="form-group col-md-3"> <label for="firstname">FirstName</label> <input type="text" class="form-control" > </div> <div class="form-group col-md-3"> <label for="lastname">last name</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-3"> <label for="lastname">identification no</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-3"> <button> <i class="fas fa-search"></i> </button> </div> </div> <div class="form-group"> <label for="inputAddress">email</label> <input type="text" class="form-control"> </div> </form>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Supongo que un componente principal tiene la clase de centro de texto: class="text-center"
Por lo tanto, debe agregar la clase text-start a su formulario para lograr la alineación deseada.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <div class="text-center"> <form class="text-start"> <div class="row g-3"> <div class="form-group col-sm-3"> <label for="firstname" class="form-label">FirstName</label> <input type="text" class="form-control" > </div> <div class="form-group col-sm-3"> <label for="lastname" class="form-label">last name</label> <input type="text" class="form-control"> </div> <div class="form-group col-sm-3"> <label for="lastname" class="form-label">id no</label> <input type="text" class="form-control"> </div> <div class="form-group col-sm-3"> <button> <i class="fas fa-search"></i> </button> </div> </div> <div class="form-group col-sm-3"> <label for="inputAddress">email</label> <input type="text" class="form-control"> </div> </form> </div>
·
Juan Pablo Isaza
Denunciar
0
Esta es mi manera de hacer lo mismo
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Search Profile - Personal</h2> <hr> <form> <div Class="row"> <div class="form-group col-md-3"> <label for="firstname">FirstName</label> <input type="text" class="form-control" > </div> <div class="form-group col-md-3"> <label for="lastname">last name</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-3"> <label for="lastname">identification no</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-3"> <button type="button" class="btn btn-default" style="font-size:32px;"> <span class="glyphicon glyphicon-search"></span> </button> </div> </div> <div class="row"> <div class="form-group col-md-3"> <label for="usr">Email:</label> <input type="text" class="form-control" id="usr"> </div> </div> <hr> </form> </div> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta