Aggiornamento input-append Bootstrap 3

Question

Sto aggiornando a Bootstrap 3, ma non riesco a capire come aggiornare il mio vecchio input-appends.

ho avuto qualcosa di simile:

<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> 

in anteprima: http://bootply.com/75910

In Bootstrap 3, questo è il più vicino ho potuto ottenere

<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> 

in anteprima: http://bootply.com/75912

Se Rimuovo l'intervallo che diventa perfetto, ma sono dentro linee diverse.

Qualche idea su come farlo correttamente?

Answer 1

Questo è documentato here e here:

Rimuovi ingresso-anteporre e input-accodare per singolare .input-group. Le classi sono cambiate per gli elementi all'interno, e richiedono un po 'più di markup per usare pulsanti:

• Usa .input-group come la classe padre intorno l'ingresso e l'addon.
• Per le prepazioni/accodifiche basate su testo, utilizzare .input-group-addon anziché .addon.
• Per il pulsante ante/aggiunte, utilizzare .input-group-btn e inserire il proprio .btn all'interno di quell'elemento.

Esempio:

<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> 

EDIT: esempi di lavoro da @kviktor e @ max4ever:

http://bootply.com/75917

http://bootply.com/78014