css - form - Entrada de Twitter Bootstrap Agregar no ancho completo del contenedor

bootstrap español

Question

Tengo un sitio web creado en Twitter Bootstrap .

Cuando construyo un formulario de 2 columnas, estoy tratando de usar la clase de input-prepend para agregar un icono de correo electrónico a la izquierda de una entrada de formulario. Quiero que el campo de entrada junto con el icono de anteponer siempre sea el 100% del contenedor.

Aquí está mi código:

                      <div class=''row-fluid''>
                        <div class=''span6''>
                          <div class=''control-group'' id=''contactEmailControlGroup''>
                            <label for=''contactEmail''>Email Address</label>
                              <div class=''input-prepend''> <span class=''add-on''><i class=''icon-envelope''></i></span>
                                <input type=''email'' name=''contactEmail'' id=''contactEmail'' class=''span11'' placeholder=''Your email address...'' tabindex=''3'' required/>
                                <span class=''help-inline formAlert'' id=''contactEmailError''> <i class=''icon-edit formAlertIcon''></i> Please enter your email address </span> <span class=''help-inline formAlert'' id=''contactEmailInvalidError''> <i class=''icon-exclamation-sign formAlertIcon''></i> Invalid email address </span>
                            </div>
                          </div>
                        </div>
                        <div class=''span6''>
                          <div class=''control-group''>
                            <label for=''contactPhone''>Phone Number</label>
                            <input type=''tel'' name=''contactPhone'' id=''contactPhone'' class=''span12'' placeholder=''Your phone number...'' tabindex=''4'' required/>
                            <span class=''help-inline formAlert'' id=''contactPhoneError''> <i class=''icon-edit formAlertIcon''></i> Please enter your phone number </span> <span class=''help-inline formAlert'' id=''contactPhoneInvalidError''> <i class=''icon-exclamation-sign formAlertIcon''></i> Invalid phone number </span> </div>
                        </div>
                      </div>

Al usar este código, el formulario se parece a esta captura de pantalla:

Pero cuando cambio el tamaño del navegador para simular una pantalla más pequeña, el ancho del campo con el add-on adjunto tiene un tamaño incorrecto, como se ve aquí:

PREGUNTA

• ¿Hay alguna forma diferente de codificar esta forma para que el campo de entrada y el ícono sean 100% y coincidan con los otros campos?
• O ¿Qué CSS necesito cambiar en Bootstrap para cambiar esto?

Answer 1

Bootstrap 3 aún no ha salido, así que aquí está mi solución simple y funcional para casos de anexión y preexplosión. Incluye esto después de los archivos CSS / LESS de Bootstrap:

.input-append.input-block-level,
.input-prepend.input-block-level {
  display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
  display: table-cell;
  width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
  display: table; /* table-cell is not working well in Chrome for small widths */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}

Úselo así en su HTML y recuerde que, en este caso, debe usar a button de etiquetas no para sus botones:

<div class="input-append input-block-level">
  <input type="text" />
  <a class="btn add-on">click</a>
</div>

Answer 2

Resulta que este es un problema conocido y se tratará en la versión 3. [FUENTE]