Bootstrap auswählen und Textfeld nebeneinander

Question

Ich versuche, dropdown und input nebeneinander wie in der folgenden Abbildung angezeigt.

Ich habe versucht, Inline-Formulare und Eingabegruppe aber alle Beispiele, die ich über die Ausrichtung von static text mit Spannweite zeigen gesehen haben und input Steuernebeneinander

Bisher ist unter dem, was ich habe versucht,

<div class="form-inline"> 
    <div class="form-group"> 
    <select class="form-control" id="phonetype"> 
       <option value="">Select Phone Type</option> 
       <option value="Passport">Mobile Phone</option> 
       <option value="SSN">Work Phone</option> 
       </select> 
    <input class="form-control" id="phone" name="phone" type="text" placeholder=""> 
    </div> 
</div> 

JSBin

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="form-group"> 
 
<div class=""> 
 
    <div class="form-inline"> 
 
    <div class="form-group col-xs-6"> 
 
     <select class="form-control" id="phonetype"> 
 
        <option value="">Select Phone Type</option> 
 
        <option value="Passport">Mobile Phone</option> 
 
        <option value="SSN">Work Phone</option> 
 
       </select> 
 
       </div> 
 
       <div class="form-group col-xs-6"> 
 
     <input class="form-control" id="phone" name="phone" type="text" placeholder=""> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

etwas wie das Versuchen:

<div class="container"> 
    <div class="row"> 
    <div class="form-inline"> 
     <div class="form-group navbar navbar"> 
     <select class="form-control nav navbar-nav navbar-static-top" id="phonetype"> 
      <option value="">Select Phone Type</option> 
      <option value="Passport">Mobile Phone</option> 
      <option value="SSN">Work Phone</option> 
     </select> 
     <input class="form-control nav navbar-nav navbar-static-top" id="phone" name="phone" type="text" placeholder=""> 
     </div> 
    </div> 
    </div> 
</div> 

Es produziert dies:

Screen