Uaktualnienie Bootstrap 3 input-append

Question

Uaktualniam do Bootstrap 3, ale nie mogę po prostu wymyślić, jak zaktualizować moje stare dane wejściowe.

miałem coś takiego:

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

Preview: http://bootply.com/75910

W Bootstrap 3, to jest najbliżej mogę dostać

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

Preview: http://bootply.com/75912

If Usuwam tę rozpiętość, która staje się idealna, ale są już w środku różne linie.

Każdy pomysł, jak to zrobić właściwie?

Answer 1

Jest to udokumentowane here i here:

Usuń Input-input-prepend i dołączyć do pojedynczej .input-group. Klasy zostały zmienione dla elementów wewnątrz i wymagają nieco więcej znaczników używać przyciski:

• Zastosowanie .input-group jako klasy nadrzędnej wokół wejścia i dodatek.
• W przypadku tekstów poprzedzających/dołączanych należy użyć .input-group-addon zamiast .addon.
• Dla przycisku poprzedzającego/dołączającego, użyj .input-group-btn i umieść w tym elemencie swój .btn.

Przykład:

<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: przykłady roboczych od @kviktor i @ max4ever:

http://bootply.com/75917

http://bootply.com/78014