Bootstrap 3 entrada-añadir actualización

Question

Bootstrap 3 entrada-añadir actualización

Estoy actualizando a Bootstrap 3, pero simplemente no puedo averiguar cómo actualizar mi antiguo input-appends.

Tenía algo como esto:

<div class="input-append">
  <select>
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="btn" value="valami">
</div>

Vista previa: http://bootply.com/75910

En Bootstrap 3, esto es lo más cercano que pude conseguir

<div class="input-group">
  <select class="form-control">
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="form-control btn btn-default" value="valami">
</div>

Vista previa: http://bootply.com/75912

Si elimino ese lapso, se vuelve perfecto, pero están en líneas diferentes.

¿Alguna idea de cómo hacer esto correctamente?

45

twitter-bootstrap twitter-bootstrap-3

Author: kviktor, 2013-08-21

Source

1 answers

score 81 · Accepted Answer

Esto está documentado aquí y aquí:

Remove input-prepend and input-append for singular .input-group. Clase han cambiado para los elementos dentro, y requieren un poco más de marcado para usar botones:

Use .input-group como la clase padre alrededor de la entrada y el complemento.

Para los prepends/apéndices basados en texto, use .input-group-addon en lugar de .addon.

Para el botón, se antepone/anexa, use .input-group-btn y coloque su .btn dentro de eso elemento.

Ejemplo:

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-xs-12 col-lg-3">
      <form class="form-search">
          <div class="input-group">
              <input type="text" class="form-control " placeholder="Text input">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-search">Search</button>
              </span>
          </div>
      </form>
    </div>
  </div>
</div>

EDITAR: Ejemplos de trabajo de @kviktor y @max4ever:

Http://bootply.com/75917

Http://bootply.com/78014