Bootstrap entrada de texto de ancho completo dentro del formulario en línea

Solución:

Los documentos de bootstrap dicen sobre esto:

Requiere anchos personalizados Las entradas, selecciones y áreas de texto son 100% anchas por defecto en Bootstrap. Para usar el formulario en línea, tendrá que establecer un ancho en los controles de formulario utilizados dentro.

El ancho predeterminado del 100% ya que todos los elementos del formulario obtienen cuando obtienen la clase form-control no se aplica si usa el form-inline class en su formulario.

Puede echar un vistazo a bootstrap.css (o .less, lo que prefiera) donde encontrará esta parte:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

Tal vez debería echar un vistazo a los grupos de entrada, ya que supongo que tienen exactamente el marcado que desea usar (violín de trabajo aquí):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

eche un vistazo a algo como esto:

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

Como se indica en una pregunta similar, intente eliminar instancias del input-group clase y ver si eso ayuda.

refiriéndose a bootstrap:

Los controles de formulario individuales reciben automáticamente un estilo global. Todos los elementos textuales,, y con .form-control se establecen en width: 100%; por defecto. Envuelva las etiquetas y los controles en .form-group para un espaciado óptimo.

---

---

Utiliza Nuestro Buscador