0

Tengo un form con este label y imput para añadir el valor

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group">
        <label for="nombre">Nombre:</label>
        <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre"></input>
    </div>

Que genera esto:introducir la descripción de la imagen aquí

Quiero recorta el input, que no sea tan largo. Según el manual de bootstrap, tengo que añadir un div con las columnas que quiero que ocupe, de esta forma:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <div class="form-group">
          <label for="nombre">Nombre:</label>
          <div class="col-sm-4">
          <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre"></input>
          </div>
     </div>

Pero se desarma todo introducir la descripción de la imagen aquí

¿Como se haría y cuál es el problema?

Edit: Según lo que tengo descargado, la versión de bootstap es: Bootstrap v3.3.6

Muchas gracias.

3
  • ¿Qué versión de Bootstrap utilizas?
    – user22721
    Commented el 21 mar. 2018 a las 14:48
  • La versión Bootstrap v3.3.6. Gracias
    – Vidal
    Commented el 21 mar. 2018 a las 14:49
  • ¿Puede ser que tengas otro css que esté interfiriendo? He puesto los dos trozos de tu código en este fiddle y se ve bien: jsfiddle.net/Kiko_L/d5gqzzqt
    – Kiko_L
    Commented el 21 mar. 2018 a las 14:53

2 respuestas 2

6

esto no está bien:

 <div class="form-group">
   <label for="nombre">Nombre:</label>
   <div class="col-sm-4">
     <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre"/>
   </div>
 </div>

ya que no se lo deberías de aplicar a todo el contenedor de form-group y no solamente al input, para lo que tu buscas es así:

<div class="row">
 <div class="col-sm-4">
    <div class="form-group">
      <label for="nombre">Nombre:</label>
      <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre"/>
    </div>
 </div>
</div>
1
  • Perfecto! Muchas gracias :)
    – Vidal
    Commented el 21 mar. 2018 a las 15:02
4

Debes poner tu label e input en una class row, para poder utilizar correctamente las columnas, a continuación te dejo un snipeed con un ejemplo.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="form-group row">
      <label class="col-xs-2" for="nombre">Nombre:</label>
      <div class="col-xs-4">
      <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre">
      </div>
 </div>

Puedes determinar que tamaño de columna ocupe el label o el input, cambiando el .col-xs- entre 1 y 12, teniendo 12 como el tamaño máximo de una row. (los elementos si suman mas de 12 se ubicaron en dos filas)

Adicional: Aqui puedes ver para que tamaños es cada prefijo (xs - sm - md - lg)

1
  • Muchas gracias :)
    – Vidal
    Commented el 21 mar. 2018 a las 15:02

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.