Me gustaría controlar el tamaño de mis elementos de entrada uso de la clase .col-lg-* descritos aquí en el sitio web de bootstrap. Sin embargo, al poner el <span> elemento dentro de un div por completo desorden:

HTML con div:

<div class="input-group input-group-lg">
  <label for="" class="control-label">Paycheck</label>
  <div class="col-lg-10">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control" id="">
  </div>
</div>

Bootstrap 3: configure la anchura personalizada con la entrada de grupo de entrada de-grupo-addon y horizontal etiquetas

¿Cómo puedo ajustar el ancho de los elementos de entrada, de modo que todos ellos son el mismo?

Quiero el margen izquierdo de cada elemento de entrada a ras así:

Bootstrap 3: configure la anchura personalizada con la entrada de grupo de entrada de-grupo-addon y horizontal etiquetas

Esto es lo que se ve ahora:

Bootstrap 3: configure la anchura personalizada con la entrada de grupo de entrada de-grupo-addon y horizontal etiquetas

Este es mi actual HTML:

    <div class="col-md-6">
        <div class="content">
            <h2>Income</h2>
        <form class="form-income form-horizontal" role="form">

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Paycheck</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Investments</label>
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" id=""> 
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Other</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
        </form>

        </div>

VIVIR EJEMPLO: http://jsfiddle.net/jfXUr/

Sólo .form-control y .input-group-addon elementos deben ir dentro de .input-group contenedores. Uso .form-group al grupo de las etiquetas y .input-group elementos
¿Cómo es esto – jsfiddle.net/jfXUr/1 ?

OriginalEl autor Keven | 2013-11-29

1 Comentario

  1. 17

    Que por mi comentario anterior, trate de agrupación de la etiqueta y .input-group junto con un .form-group contenedor.

    <div class="form-group">
        <label for="" class="control-label">Paycheck</label>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">$</span> 
            <input type="text" class="form-control" id="">
        </div>
    </div>

    Demo aquí – http://jsfiddle.net/jfXUr/1/

    Gracias Phil. Lo que hiciste se ve bien, pero realmente me gustaría que las etiquetas se muestran junto a los elementos de entrada. Es eso posible?
    Para eso, usted debe utilizar .form-horizontal. Usted tendrá que agregar el col- clases con sus etiquetas y .input-group para el dimensionamiento de los elementos
    Ya estoy utilizando .form-horizontal en mi elemento de formulario. Por lo que debe funcionar si pongo la .input-group clase en las etiquetas? Cualquier manera que usted podría hacer un violín que me muestran lo que significa?
    Ah, su violín no tiene forma horizontal. He aquí una horizontal ejemplo – jsfiddle.net/jfXUr/3. Nota el col- clases en las etiquetas y grupos de entrada. He usado xs columnas, de manera que el trabajo en JSFiddle la pequeña windows
    Gracias Phil!! Eres increíble. Se trabajó. Me di cuenta de la xs. Voy a cambiar eso para que se ajuste a mis necesidades. Tener una buena!

    OriginalEl autor Phil

Dejar respuesta

Please enter your comment!
Please enter your name here