Zone de saisie dans la barre de boutons

Question

Je tente de placer une zone de saisie dans une barre d'amorçage à 3 boutons, mais elle n'est pas alignée comme prévu.

<div class="row"> 
    <div class="col-xs-12"> 
     <div class="btn-toolbar text-center"> 
      <div class="btn-group"> 
        <div class="input-group col-xs-3"> 
        <input type="text" class="form-control"> 
        <span class="input-group-addon">$</span> 
        </div> 
      </div> 
      <div class="btn-group"> 
       <button class="btn btn-default">Button 1</button> 
       <button class="btn btn-default">Button 2</button> 
      </div> 
     </div> 
    </div> 
</div> 

Il fonctionne très bien si j'utilise une entrée de vanille, mais les boutons de la seconde BTN groupe déplacer vers le bas à la ligne suivante lorsque je tente d'utiliser un groupe d'entrée. Toute idée sur la façon dont je peux les avoir apparaître sur la même ligne?

Voici un violon montrant le problème

http://jsfiddle.net/6XST2/

Answer 1

Réglez le col classe à l'élément parent, le .btn-group. Changer ceci:

<div class="btn-group"> 
    <div class="input-group col-xs-3"> 

à ceci:

<div class="btn-group col-xs-3"> 
    <div class="input-group"> 

Sinon, le btn-group se remplit toute la largeur.
http://jsfiddle.net/6XST2/3/

Answer 2

essayer de voir cette solution et dans cette solution, vous devez changer la classe col-xs-3-col-xs-12

http://jsfiddle.net/6XST2/1/