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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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