1

Hola buenas tengo un problema con el formulario y es que quiero alinear los inputs a la derecha.

nombre    : input
apellidos : input input

actualmente se me ve asi:

nombre
input
apellidos 
input 
input

https://jsfiddle.net/bajud5z0/1/ muchas gracias! :)

4 respuestas 4

1

Esto podría valerte (no he usado bootstrap): https://jsfiddle.net/c2hm32bf/3/

1
0

Es muy simple, te paso un ejemplo, debes poner cada campo en una columna diferente.

En el ejemplo he puesto un .col-sm-2 para el label, y .col-sm-5 para los campos de formulario; todo dentro de un .form-group

No te olvides de ejecutar y ampliar para ver el ejemplo a pantalla completa. Dime si hay algo que no entiendas.

/* Link boostrap */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
<form class="form-horizontal">
  <div class="form-group">
    <label for="input-nombre" class="col-sm-2 control-label">Nombre</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="input-nombre" placeholder="Nombre">
    </div>
  </div>
  <div class="form-group">
    <label for="input-apellido" class="col-sm-2 control-label">Apellidos</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="input-apellido-1" placeholder="Apellido Uno">
    </div>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="input-apellido-2" placeholder="Apellido Dos">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success">Enviar formulario</button>
    </div>
  </div>
</form>

Además viendo tu codigo:

  • le falta el class="form-control" de bootstrap para cada campo de formulario
  • tienes que usar .form-grouppara cada campo con su label
0

Prueba hacerlo siguiendo éste ejemplo:

<div class="form-group">
    <div class="row">
        <div class="col-lg-offset-1 col-lg-2">
            <label for="nombre">Nombre</label>
        </div>
        <div class="col-lg-8">
            <input type="text" class="form-control" name="nombre">
        </div>
    </div>
</div>

Suerte!

0

Prueba con esto:

    <form action="" class="form-inline">
        <div class="form-group">
           <label for="nombre" class="control-label col-sm-3">Nombre</label>
              <div class="col-sm-9">
                 <input type="text" id="nombre" class="form-control">
              </div>
        </div>
    </form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.