0
289
Views¿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 answers
Answer question0
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
Report
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
Report
Answer question