Casella di testo in linea di avvio e pulsante di ricerca

Question

Ho una casella di input di ricerca, che voglio in stile con il bootstrap con l'aspetto di controllo del form bootstrap. Il problema è, voglio anche il pulsante di ricerca sulla stessa riga della casella di ricerca. Ho pensato che questo potrebbe essere fatto con la forma-linea, ma quando aggiungo classe modulo di controllo alla casella di ricerca, il pulsante di ricerca viene spinto alla riga successiva:

<div class="input-group" > 
    <div class="form-inline"> 
     <input id="address" type="textbox" placeholder="City or Zipcode" class="form-control" > 
     <input class="btn btn-sm btn-primary" type="button" value="Search" id="addressSearch"> 
    </div> 
</div> 

http://jsfiddle.net/TLEbG/

Se rimuovo classe Inline = "form-controllo" dalla casella di testo in ingresso, viene visualizzato il pulsante:

http://jsfiddle.net/ETs9M/

Come posso mantenere la casella styling form-contol, mantenendo il pulsante di linea?

Answer 1

Provare a utilizzare gruppi di input: http://getbootstrap.com/components/#input-groups questo mette il pulsante accanto al campo di testo e lo rende un componente

Answer 2

Questa risposta viene dalla original poster's comment:

<div class="input-group"> 
    <input id="address" type="text" placeholder="City or Zipcode" class="form-control"> 
    <span class="input-group-btn"> 
    <button class="btn btn-default" type="button" id="addressSearch">Search</button> 
    </span> 
</div> 

Bootply: http://www.bootply.com/gVSi912QEI#